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 mand 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:

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 mand 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:

• javascript
• css
• webpack
• webpack-style-loader

• Can you share your web pack.config.js file? – Voro Commented Jan 16, 2018 at 16:31
• Just click link above in question. – BT101 Commented Jan 16, 2018 at 16:32
• tell me your webpack version? – Voro Commented Jan 16, 2018 at 16:35
• it's in package.json "webpack": "2.1.0-beta.25", I also edit second error and copied more of its. – BT101 Commented Jan 16, 2018 at 16:38

2 Answers 2

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

Try this

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