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 ...
随机推荐
- SRC常见WEB漏洞系列之HTTP-HOST头攻击
一.背景: web程序需要知道网站的域名比较麻烦,需要使用HTTP的 host头字段: <?php _SERVER["HTTP_HOST"] ?> @app.route ...
- vim命令删除后重新安装
个人原创博客,转载请注明,否则追究法律责任 2017-09-30-09:51:20 1,删除vim命令.模拟错误 [root@localhost ~]# which vim/usr/bin/vim[r ...
- Android自定义控件实战——仿淘宝商品浏览界面
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...
- SSH电力项目四-显示首页
1.登录页面: 将上一节中的页面放到/WEB-INF/page/目录下,需要登录后才能访问该页面: 对应页面:/WEB-INF/page/menu/home.jsp <%@ page langu ...
- OC开发_Storyboard——多线程、UIScrollView
一.多线程 1.主队列:处理多点触控和所有UI操作(不能阻塞.主要同步更新UI) dispatch_queue_t mainQueue = dispatchg_get_main_queue(); // ...
- angular -- ng-ui-route路由及其传递参数?page页面版
前面有说过 ng-ui-route 使用 script 标签来做,但是很多时候,会通过引入模板页面的方式来实现: 具体代码: <!DOCTYPE html> <html lang=& ...
- 【转载】网络安全---Strurts2漏洞介绍
Apache Struts2 作为世界上最流行的 Java Web 服务器框架之一,3 月 7 日带来了本年度第一个高危漏洞——CVE编号 CVE-2017-5638 .其原因是由于 Apache S ...
- 170619、springboot编程之HelloWorld
springboot资料看了一段时间了,个人觉得开发效率相当高,也参考了网上很多大牛的技术博客,在这里面我也记录一下,方便以后自己翻阅查看,同时也给新手最一点点指引.如果有侵权大牛博客文章,请告诉我, ...
- 03Del.ashx(删除班级)
03Del.ashx 数据库里定义个BOOL型,TRUE表示正常FALSE表示删除 using System; using System.Collections.Generic; using Syst ...
- java 新手入门课程03
2017.7.6 java 课堂笔记 1.关于分支; if/else 是基于boolean 值的双分支 Switch 基于数字(包括整数 char byte 枚举, 字符串)类型的多分支 方法 ...