webpack css loader不起作用

Question

Hello I'm trying to load bootstrap css through webpack style-loader in my vue2js SPA.

I installed style loader with npm install --save-dev css-loader and I've got it in devDependiecies of package.json . I also added following to my webpack.conf.js :

  {
      test: /\.css$/,
      use: [ 'style-loader', 'css-loader' ]
  }

Then I installed bootstrap css throught

npm install bootstrap@4.0.0-beta.3

And last thing I did is import bootstrap css in main.js

import '../node_modules/bootstrap/dist/css/bootstrap.css'
import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css'

I also tried like this:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

and like this:

import './../node_modules/bootstrap/dist/css/bootstrap.css'
import './../node_modules/bootstrap-vue/dist/bootstrap-vue.css'

This doesn't work giving me this error in command line(AFTER SERVER START):

ERROR in ./src/main.js Module not found: Error: Can't resolve '../node_modules/bootstrap-vue/dist/bootstrap-vue.css' in 'C:\\Users\\Adm\\Documents\\TheStockerTrader\\src' @ ./src/main.js 7:0-62 @ multi main

ERROR in ./src/main.js Module not found: Error: Can't resolve 'style-loader' in 'C:\\Users\\Adm\\Documents\\TheStockerTrader' @ ./src/main.js 6:0-58 @ multi main

And this errors in chrome console:

resolve 'bootstrap-vue/dist/bootstrap-vue.css' in 'C:\\Users\\Adm\\Documents\\TheStockerTrader\\src' Parsed request is a module using description file: C:\\Users\\Adm\\Documents\\TheStockerTrader\\package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration

Module not found: Error: Can't resolve '../node_modules/bootstrap-vue/dist/bootstrap-vue.css' in 'C:\\Users\\Adm\\Documents\\TheStockerTrader\\src'

What I'm doing wrong, why my css-loader doesn't work? It says that it can't find bs module but I'm sure I installed it, I also checked if it is present in my node_modules folder and it is:

Answer 1

Did you install style loader as well:

npm install style-loader --save-dev

Then set as a loader:

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

Answer 2

Try this

module : {
    rules : [
...
        {
          test: /\.css$/,
          include: helpers.root('src', 'app'),
          loader: 'raw-loader'
        },
        // // css global which not include in components
        {
          test: /\.css$/,
          exclude: path.join(__dirname, '/src/app'),
          use: ExtractTextPlugin.extract({
            use: 'raw-loader'
          })
        },
    ]...
}
plugin : [
    ...
    new ExtractTextPlugin(
        '[name].css'
    ),
]