Don´t get it: Want to load component styles last


#1

Sorry if this is something easy, but i don´t get it. When i build my app the component styles (SFC) are loaded first and they get overwritten by my element-ui styles. I understand, that webpack ist looking for the order of the imports. But even if i put element-ui first it doesn´t work:

import 'element-ui/lib/theme-chalk/index.css';    
import ElementUI from 'element-ui';
import Vue from 'vue'
Vue.use(ElementUI, { locale })
import App from './App'
import router from './router'
...

config.vue.js

Not sure if css-loader is the way and even wehen what to put in here.

const webpack = require('webpack');
    module.exports = {
      css: {
        loaderOptions: {
          css: {
            // options here will be passed to css-loader. Is this the way?
          },
        }
      }
    }

Please help. I´ve looked for hours and don´t get it.

thanks
Benjamin


#2

Your code doesn’t show where you actually import element’s css?


#3

Oh sorry. It´s on the top. I have edited the post.


#4

Hm, don’t see why those styles should not be injected first.

Are you importing them only there?

Do you have any webpack config changed?


#5

Thanks for looking into it. Yes, there is no import in any other file. This is my default vue.config:

const webpack = require('webpack');
console.log("CONFIG1")
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
}