CODEWITHSUNDEEP
javascriptcsswebpackwebpack-style-loader
BT101
BT101

Reputation: 3836

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 [email protected]

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

Upvotes: 5

Views: 3996

Answers (2)

Cristophs0n
Cristophs0n

Reputation: 1266

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

Upvotes: 7

Voro
Voro

Reputation: 255

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'
    ),
]

Upvotes: 0

Related Questions