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 ...
随机推荐
- nexus 增加代理仓库 无法搜到snapshot的jar包 解决方法
如题, nexus 私服 增加了另一个 私服, 但是无法搜到 版本中带有 snapshot字样的 jar包. 环境情况: 1.老私服: 首先版本中带有 snapshot字样的 jar包,是发布在 老 ...
- PHP获取POST的原始数据的方法
一般我们都用$_POST或$_REQUEST两个预定义变量来接收POST提交的数据.但如果提交的数据没有变量名,而是直接的字符串,则需要使用其他的方式来接收. 方法一: 使用全局变量$GLOBALS[ ...
- hdu5305 Friends[状压dp]
Friends Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Su ...
- mysql如何用sql增加字段和注释?
alter table warn_user_binding add is_valid varchar(10) default 'true' COMMENT '删除标识:true 有效:false 删除 ...
- ST-LINK使用注意
利用ST-LINK下载程序注意事项: 1.接线 按照上面图对着自己的开发板连接相应的引脚就可以了. 2.keil5配置 线连接完之后,要对自己的工程进行相关的 配置才能正确进行下载. 首先选择ST-L ...
- 关于Properties的用法的详细解释
如果不熟悉 java.util.Properties类,那么现在告诉您它是用来在一个文件中存储键-值对的,其中键和值是用等号分隔的.(如清单 1 所示).最近更新的java.util.Properti ...
- Centos6.8 防火墙设置
1.指令 vi /etc/sysconfig/iptables 添加以下内容和要开放的端口 # Firewall configuration written by system-config-fire ...
- 【vue】---Object.defineProperty基本使用---【巷子】
1.object.defineProperty 给一个对象定义一个新的属性或者在修改一个对象现有的属性,并返回这个对象 语法: Object.defineProperty(参数1,参数2,参数3) 参 ...
- ibatis 中#和 $ 符号的区别
1.数据类型匹配 #:会进行预编译,而且进行类型匹配(自动确定数据类型): $:不进行数据类型匹配. 2.实现方式: # 用于变量替换(先生成一个占位符,然后替换) select * from use ...
- hihoCoder_1449_后缀自动机三·重复旋律6
#1449 : 后缀自动机三·重复旋律6 时间限制:15000ms 单点时限:3000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数 ...