使用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的更多相关文章

  1. webpack 报错:Module build failed: Unknown word (1:1)

    解决方法:一是确保css配置里的"style-loader"必须在"css-loader"之前,二是将整个css配置注释掉,如下图:

  2. webpack中Module build failed: Unknown word (2:1)

    在新建的webpack.config.js文件中配置好style-loader和css-loader,注意顺序为:style-loader,css-loader,less-loader,postcss ...

  3. 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 ...

  4. 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'] ...

  5. 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 ...

  6. 出现报错: module build failed error couldn't find preset es2015 relative to directory

    当用webpack 进行 build 的时候, 会出现如上标题的错误, 解决方式是在 上级 或者 上上级目录,删除 .babelrc 文件

  7. Module build failed: Module failed because of a eslint warning

    eslint 设置 warning 级别,在 开发编译失败的原因,报错如下: F:\vue-mobile-skeleton>npm run dev > byhealth@1.0.0 dev ...

  8. 配置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 ...

  9. 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 ...

随机推荐

  1. nexus 增加代理仓库 无法搜到snapshot的jar包 解决方法

    如题, nexus 私服 增加了另一个 私服,  但是无法搜到 版本中带有 snapshot字样的 jar包. 环境情况: 1.老私服: 首先版本中带有 snapshot字样的 jar包,是发布在 老 ...

  2. PHP获取POST的原始数据的方法

    一般我们都用$_POST或$_REQUEST两个预定义变量来接收POST提交的数据.但如果提交的数据没有变量名,而是直接的字符串,则需要使用其他的方式来接收. 方法一: 使用全局变量$GLOBALS[ ...

  3. hdu5305 Friends[状压dp]

    Friends Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Su ...

  4. mysql如何用sql增加字段和注释?

    alter table warn_user_binding add is_valid varchar(10) default 'true' COMMENT '删除标识:true 有效:false 删除 ...

  5. ST-LINK使用注意

    利用ST-LINK下载程序注意事项: 1.接线 按照上面图对着自己的开发板连接相应的引脚就可以了. 2.keil5配置 线连接完之后,要对自己的工程进行相关的 配置才能正确进行下载. 首先选择ST-L ...

  6. 关于Properties的用法的详细解释

    如果不熟悉 java.util.Properties类,那么现在告诉您它是用来在一个文件中存储键-值对的,其中键和值是用等号分隔的.(如清单 1 所示).最近更新的java.util.Properti ...

  7. Centos6.8 防火墙设置

    1.指令 vi /etc/sysconfig/iptables 添加以下内容和要开放的端口 # Firewall configuration written by system-config-fire ...

  8. 【vue】---Object.defineProperty基本使用---【巷子】

    1.object.defineProperty 给一个对象定义一个新的属性或者在修改一个对象现有的属性,并返回这个对象 语法: Object.defineProperty(参数1,参数2,参数3) 参 ...

  9. ibatis 中#和 $ 符号的区别

    1.数据类型匹配 #:会进行预编译,而且进行类型匹配(自动确定数据类型): $:不进行数据类型匹配. 2.实现方式: # 用于变量替换(先生成一个占位符,然后替换) select * from use ...

  10. hihoCoder_1449_后缀自动机三·重复旋律6

    #1449 : 后缀自动机三·重复旋律6 时间限制:15000ms 单点时限:3000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数 ...