Css fails to parse using vue webpack-simple

Question

I have created a webpack-simple project as explained here: https://github.com/vuejs-templates/webpack-simple.

Next, I installed vue-codemirror (link) with npm install vue-codemirror --save. In main.js, vue-codemirror is imported and used.

import CodeMirror from 'vue-codemirror';
Vue.use(CodeMirror);

But, running npm run dev yields errors with all of the codemirrror css. The errors all look like this:

ERROR in ./~/codemirror/addon/dialog/dialog.css
Module parse failed: C:\Users\aidan\Code\ludum-dare-37\node_modules\codemirror\addon\dialog\dialog.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .CodeMirror-dialog {
|   position: absolute;
|   left: 0; right: 0;
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/vue-codemirror/codemirror.vue 99:6-51
 @ ./~/vue-codemirror/codemirror.vue
 @ ./~/vue-codemirror/index.js
 @ ./src/main.js
 @ multi main

Answer 1

I needed to install style-loader

npm install style-loader --save-dev

And then add it to webpack.config.js. Specifically, I added the following module rule:

{
    test: /\.css$/,
    loader: "style-loader!css-loader"
},