Vue+Webpack配置css-loader时报错:Module build failed: Unknown word
使用Vue+Webpack搭建工程时,在webpack.config.js中的module的rules里针对各种文件配置加载工具。在针对css文件配置时遇到一个问题:打包构建时报错——Module build failed: Unknown word。
配置内容如下:
{
test: /\.css$/,
use: [
'css-loader',
'style-loader'
]
}
在网上找解决方案时看到一种方法,将这段配置注释掉,不会影响css代码的引入,也不会再报错,不过作者并未找到原因。但是,将该方法运用到我的代码中时没有作用,将配置注释掉后会报错:You may need an appropriate loader to handle this file type.——要求对该类型文件配置加载工具!
试了几种方法并没有效果,后来想到视频教程中提到这些工具的作用:css-loader用于读取css文件,style-loader用于处理css-loader读取的文件,这里有没有依赖关系之类的,需要按照一定的顺序配置,于是将顺序调换了一下,配置如下:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
这样处理后,打包构建时没有报错了,输出文件中也有css样式,说明打包构建是成功的,也证实了loader的加载顺序是有要求的,而且越是基础的loader越要放在前面,如果使用less、sass或stylus,less-loader、sass-loader、stylus-loader要放在最后面。另外,使用sass-loader时,要安装node-sass依赖,不过不用在webpack.config.js里面配置。
Vue+Webpack配置css-loader时报错:Module build failed: Unknown word的更多相关文章
- webpack 报错:Module build failed: Unknown word (1:1)
解决方法:一是确保css配置里的"style-loader"必须在"css-loader"之前,二是将整个css配置注释掉,如下图:
- webpack中Module build failed: Unknown word (2:1)
在新建的webpack.config.js文件中配置好style-loader和css-loader,注意顺序为:style-loader,css-loader,less-loader,postcss ...
- vue.js报错:Module build failed: Error: No parser and no file path given, couldn't infer a parser.
ERROR Failed to compile with 2 errors 12:00:33 error in ./src/App.vue Module build failed: Error: No ...
- nuxt/eapress 安装报错Module build failed: ValidationError: PostCSS Loader Invalid OptionsModule build failed: ValidationError: PostCSS Loader Invalid Options options['useConfigFile'] is an invalid additi
错误信息: Module build failed: ValidationError: PostCSS Loader Invalid Options options['useConfigFile'] ...
- webpack搭建项目时出现的报错“Module build failed (from ./node_modules/css-loader/dist/cjs.js) CssSyntaxError”
控制台出现的错误如下: webpack.config.js中的配置如下: module.exports={ entry:'./src/main.js', output:{ path:__dirname ...
- 出现报错: module build failed error couldn't find preset es2015 relative to directory
当用webpack 进行 build 的时候, 会出现如上标题的错误, 解决方式是在 上级 或者 上上级目录,删除 .babelrc 文件
- Module build failed: Module failed because of a eslint warning
eslint 设置 warning 级别,在 开发编译失败的原因,报错如下: F:\vue-mobile-skeleton>npm run dev > byhealth@1.0.0 dev ...
- 配置web pack loader 报错:Module build failed: Error: The node API for `babel` has been moved to `babel-core`.
报错如下 Module build failed: Error: The node API for `babel` has been moved to `babel-core`. 在我配置loader ...
- vue项目报错,解决Module build failed: Error: Cannot find module 'node-sass' 问题
1.报错问题 1 E:\WebStormFile\treehole-manage>npm run dev > xc-ui-pc-sysmanage@1.0.0 dev E:\WebStor ...
随机推荐
- 【BZOJ1054】[HAOI2008]移动玩具 BFS
[BZOJ1054][HAOI2008]移动玩具 Description 在一个4*4的方框内摆放了若干个相同的玩具,某人想将这些玩具重新摆放成为他心中理想的状态,规定移动 时只能将玩具向上下左右四个 ...
- Unity3D笔记八 Unity生命周期及动画学习
Unity脚本从唤醒到销毁有着一套比较完善的生命周期,添加任何脚本都必须遵守自身生命周期法则.下面介绍一下生命周期中由系统自身调用的几个比较重要的方法. Update(){}.正常更新,用于更新逻 ...
- 详解Go语言中的屏蔽现象
在刚开始学习Go语言的过程中,难免会遇到一些问题,尤其是从其他语言转向Go开发的人员,面对语法及其内部实现的差异,在使用Go开发时也避免不了会踩"坑".本文主要针对Go设计中的屏蔽 ...
- 最小树形图(hdu4966多校联赛9)
GGS-DDU Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total ...
- SpringMVC中 解决@ResponseBody注解返回中文乱码
问题:在前端通过get请求服务端返回String类型的服务时,会出现中文乱码问题 原因:由于spring默认对String类型的返回的编码采用的是 StringHttpMessageConverter ...
- Requested bean is currently in creation: Is there an unresolvable circular reference?
spring容器初始化报错:循环依赖,错误信息如下: Requested bean is currently in creation: Is there an unresolvable circula ...
- python安装whl文件的注意事项(windows系统)
首先给大家来一波福利,在没有连接外网(互联网)的情况下,只有公司内网或者断网情况下,需要安装python的一些依赖,不会操作的同学可能就会遇到麻烦.这里教大家离线安装python依赖. 方法:使用.w ...
- python练习汇总
1.99乘法表 """ 题目:输出 9*9 乘法口诀表. """ for i in range(1, 10): print () for j ...
- mysql 数据操作 单表查询 group by group_concat() 函数
# group_concat() 和concat() 一样拼接字符串 用在分组里 需求:查看每个职位都有哪些员工名字 把所有员工成员的名字都列出来 把每个职位里的员工姓名列出来 mysql> s ...
- React Native教程
React Native 中文网 http://reactnative.cn/ 相关资料======================= React-Native学习指南 https://github ...