2017-04-20 87 views
0

我无法获得要导入的简单css文件。下面是我的步骤重现:加载css文件时vue-cli与webpack崩溃

从命令行:

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 /资产/风格。 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 
+0

给https://github.com/vuejs/vue-style-loader试一试也许 –

+0

@DavidL我不认为他需要'vue-style-loader'。它是https://github.com/vuejs/vue-loader足够用于'.vue'组件内部的基本样式导入。 顺便说一句,这是奇怪的......'vue-cli'应该将'cue'捆绑在'vue'组件外面 – GONG

+0

我同意。我觉得这是一个很常见的用例,我必须忽略自动执行此操作的选项。 – Paulie

回答

0

所以,问题是在我的CSS文件中一个微不足道的语法错误 - CSS文件中工作得很好,当该文件直接使用<link>加载,所以我没有注意到它。但是,我上面发布的错误消息实际上是误导性的。