I've been struggling to load css dependencies into my Vue.js webpack template, and thought I'd finally figured it out-- when suddenly it started throwing a failure to compile error centered around the postcss-loader's index.js file.
This is the error message:
Failed to compile.
./node_modules/css-loader!./node_modules/vue-style-loader!./node_modules/css-loader??ref--7-1!./node_modules/postcss-loader/lib??ref--7-2!./node_modules/bootstrap/dist/css/bootstrap.min.css
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!../../../css-loader/index.js??ref--7-1!../../../postcss-loader/lib/index.js??ref--7-2!./bootstrap.min.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | if(content.locals) module.exports = content.locals;
7 | // add the styles to the DOM
8 | var update = require("!../../../vue-style-loader/lib/addStylesClient.js")("57f69085", content, false, {});
@ ./node_modules/bootstrap/dist/css/bootstrap.min.css 2:14-196 21:1-42:3 22:19-201
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
From my webpack.base.config (adding postcss-loader to the mix did nothing, so I removed it again):
{
test: /\.css$/,
loader:['style-loader','css-loader']
},
From my main.js file:
import Vue from 'vue'
import App from './App'
import Test from './components/test'
import Test1 from './components/test1'
import router from './router'
import bootstrap from 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
This error is thrown whenever I attempt to import a css dependency via a path, be it relative or absolute. Just using import 'bootstrap'
had no effect whatsoever-- it still compiled, but the styles did not work either.