加载css文件时带有webpack的vue-cli崩溃答案

【问题标题】：vue-cli with webpack crashes when loading css file加载css文件时带有webpack的vue-cli崩溃
【发布时间】：2017-09-17 07:59:51
【问题描述】：

我无法导入一个简单的 css 文件。以下是我的重现步骤：

从命令行：

 vue init webpack my-project
 cd my-project/
 npm install
 npm install css-loader style-loader --save-dev

然后在 webpack.base.conf.js 中：

 {
   test: /\.css$/,
   use: [ 'style-loader', 'css-loader' ]
 },

然后我创建了一个文件 src/assets/styles.css:

 body {
   background-color: aqua;
 }

然后就在 App.vue 中的 import 语句下面：

 import css from './assets/styles.css'

然后我启动服务器：

 npm run dev

输出是：

 ERROR  Failed to compile with 1 errors                                                                                                                                   11:12:51 AM

 error  in ./src/assets/styles.css

Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../node_modules/css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!./styles.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("!../../node_modules/vue-style-loader/lib/addStylesClient.js")("dfb563ca", content, false);


 @ ./src/assets/styles.css 4:14-172 13:2-17:4 14:20-178
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

> Listening at http://localhost:8080

【问题讨论】：

不妨试试github.com/vuejs/vue-style-loader
@DavidL 我不认为他特别需要vue-style-loader。 github.com/vuejs/vue-loader 足以在 .vue 组件中导入基本样式。顺便说一句，这很奇怪...... vue-cli 应该将 css 捆绑在 vue 开箱即用的组件中
我同意。我觉得这是一个非常常见的用例，我一定错过了自动执行此操作的选项。

标签： javascript css webpack vue.js

【解决方案1】：

所以问题是我的 css 文件中的一个微不足道的语法错误 - 当使用 <link> 直接加载文件时 css 文件工作正常，所以我没有注意到它。不过，我在上面发布的错误消息确实具有误导性。

【讨论】：