Javascript 加载css文件时,带有webpack的vue cli崩溃
我很难导入一个简单的css文件。以下是我复制的步骤: 从命令行:Javascript 加载css文件时,带有webpack的vue cli崩溃,javascript,css,webpack,vue.js,Javascript,Css,Webpack,Vue.js,我很难导入一个简单的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/as
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
因此,问题在于我的css文件中存在一个无关紧要的语法错误——当使用
直接加载该文件时,css文件工作正常,因此我没有注意到它。不过,我上面发布的错误消息确实有误导性。试试看perhaps@DavidL我认为他不需要特别的vue风格的加载器。在.vue
组件内部导入基本样式就足够了。顺便说一句,这很奇怪vue cli
应在vue
组件中捆绑css
,我同意。我觉得这是一个如此常见的用例,我一定错过了自动完成它的选项。