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 ...
随机推荐
- 运行npm install出现警告
如下: 解决: fsevent是mac osx系统的,你是在win或者Linux下使用了 所以会有警告,忽略即可
- ./configure
./configure --prefix=/usr/local/scws --prefix选项是配置安装的路径,如果不配置该选项,安装后可执行文件默认放在/usr/local/bin,库文件默认放在/ ...
- 【黑金原创教程】【Modelsim】Modelsim原创教程连载导读【连载完成,共六章】
[第一章]Modelsim仿真的扫盲文 [第二章]Modelsim就是电视机 [第三章]理想就是美丽 [第四章]激励文本就是仿真环境 [第五章]仿真就是人生 [第六章]结束就是开始
- 高中生的IT之路-1.5西餐厅服务生
之所以说漫长的求职,是因为培训结束后半年左右没有找到工作. 每次面试结束后,得到的都是“回去等消息”,然后就杳无音信了.一次次的面试,一次次的失败,一次次查找失败的原因.总结来看主要有两点:一是没有工 ...
- 【BZOJ2809】[Apio2012]dispatching 可并堆
[BZOJ2809][Apio2012]dispatching Description 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿.在这个帮派里,有一名忍者被称之为 M ...
- 编译安装基于nginx与lua的高性能web平台-openresty
1.首先编译安装nginx(不多说) 2.开始安装openresty cd /usr/local/src wget https://openresty.org/download/openresty-1 ...
- Log4j最简入门及实例
Log4j真的很简单,简单到令人发指的地步.不是要记录日志吗?那就给你一个Log,然后你用Log来写东西就行了,先来一个完整类示例: package test; import org.apache.c ...
- 您好,前端使用https,后端使用https是会有冲突的情况,所以默认后端都是http 负载均衡即可管理证书,不需要在后端ECS上绑定证书。
您前端使用https,那么前端就是加密的,后端使用https就是会访问出现问题的,目前阿里云负载均衡默认的配置前端使用https,后端默认就是http,也是无法更改的. 前端使用https,目前只有一 ...
- 对10进制16位长的主键的缩短处理 NULL
# 对问题表去除旧有主键,新建自增主键:ALTER TABLE `question`CHANGE COLUMN `id` `id16` bigint(20) NULL COMMENT 'id_to_d ...
- sql server 2008维护计划配置
转自:https://blog.csdn.net/yunye114105/article/details/6594826 一:目标任务: 使用SQL Server 2008自带的维护计划自动备份数据库 ...