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 ...
随机推荐
- LightOJ 1348(Aladdin and the Return Journey )
题目链接:传送门 题目大意:一棵无根树,每个点上有权值,两种操作,0 x y询问x~y路径上权值和 1 x y将 节点 x 权值变为y.对于询问操作输出答案. 题目思路:树链剖分 #include & ...
- [黑金原创教程] FPGA那些事儿《设计篇 III》- 图像处理前夕·再续
简介 一本为入门图像处理的入门书,另外还教你徒手搭建平台(片上系统),内容请看目录. 注意 为了达到最好的实验的结果,请准备以下硬件. AX301开发板, OV7670摄像模块, VGA接口显示器, ...
- 部署软件RDMA的步骤
date: 2018-08-28 19:46:56 参考原文原文:http://corasql.blog.51cto.com/5908329/1930455 ...
- onethink封装arclist调用文章列表!
其实没有什么东西,做个记录,方便以后使用! <ul> <arclist mid='2' cid='2' row='2'> <li>{$title}</li&g ...
- 阿里云搭建SVN服务器
1:安装svn apt-get install subversion 2. 开启svn服务器 svnserve -d 检查是否开启:ps aux | grep svnserve 若出现如下内容: wk ...
- 170609、Nginx配置文件详细说明
在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释收集与网络. #运行用户 user www-data; #启动进程,通常设置成和cpu的数量相等 worker_processe ...
- 【转】SpringMVC+Spring3+Hibernate4开发环境搭建
原文地址: SpringMVC+Spring3+Hibernate4开发环境搭建
- Python大数据:信用卡逾期分析
# -*- coding:utf-8 -*- # 数据集成 import csv import numpy as np import pandas as pd import matplotlib.py ...
- 小米范工具系列之五:小米范WEB口令扫描器
最新版本1.2,下载地址:http://pan.baidu.com/s/1c1NDSVe 文件名 webcracker,请使用java1.8运行 小米范WEB口令扫描器的主要功能是批量扫描web口令 ...
- 从零开始写JavaWeb框架(第一章节)
买了本<从零开始写JavaWeb框架> 因为是第一次用IDEA,期间遇到很多问题,比如:怎么在IDEA中配置tomcat: 在IDEA界面的右上角点击: 点击+,选择Maven 到了如下界 ...