Search code examples
javascriptcsswebpackwebpack-style-loader

webpack css loader doesn't work

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:

files structure

Solution

  • 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" }
        ]
      }
    ]
  }
}