Module build failed: Unknown word,无法读取css文件

在写Vue程序过程中遇到错误:

ERROR in ./src/assests/styles/test.css
Module build failed: Unknown word (2:1)

  1 |
> 2 | var content = require("!!./test.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];
  5 |

 @ ./src/index.js 4:0-34
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! vuejs-todolist@1.0.0 build: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the vuejs-todolist@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

原因:
是在webpack.config.js文件中写成:

 {//加载资源
                test:/\.css$/,
                use:[//读取css文件  
                 'css-loader',
                 'style-loader',//将js文件读取到html                
                ]
            }

正确写法:

{//加载资源
                test:/\.css$/,
                use:[//读取css文件  
                 'style-loader',//将js文件读取到html中
                 'css-loader',
                ]
            }

解析:
css-loader使你能够使用类似@import和url()方法实现require的功能
style-loader将所有的计算后的样式加入页面中
二者使你能把样式表嵌入webpack打包后的js文件中。

因此,在遇到后缀为.css的文件,webpack先用css-loader加载器去解析这个文件,遇到“@import”等语句就将相应样式文件引入(若没有css-loader,就没法解析这类语句),计算完的css,将会使用style-loader生成一个内容为最终解析完的css代码的style标签,放到head标签里。

webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签

loader是有顺序的,但是要把style-loader放在css-loader的前面(webpack loader的执行顺序是从右到左)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三知之灵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值