使用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. sencha touch 入门系列 (五)sencha touch运行及代码解析(上)

    由于最近项目比较忙,加之还要转战原生开发,所以很久没更新了,今天我们接着上一次的内容往下讲: 首先我们打开index.html,这是我们整个程序的访问入口,也是整个项目的引入地: <!DOCTY ...

  2. centos7关闭自动锁屏

    centos 7默认几分钟不动就锁屏,实在很讨厌,所以在设置中将其去掉 1.不同的版本应该设置的地方稍有变化,我不敢保证我的这个方法你一定可以用,所以用之前希望你了解你的系统的版本. 2.左上角点击应 ...

  3. Egret打包App 短暂黑屏解决方案 (Egret4.1.0)

    论坛已经有人解决:http://bbs.egret.com/forum.php?mod=viewthread&tid=30288&highlight=app%2B%E9%BB%91%E ...

  4. js对字符串进行加密和解密方法!

    在做一些微信小程序,或混合 app 的时候,或者是考虑到一些 JS 数据安全的问题.可能会使用到 JS 对用户信息进行缓存. 例如在开发:微信小程序对用户进行加密缓存,开发混合APP对用户信息进行加密 ...

  5. Xshell配置ssh免密码登录-密钥公钥(Public key)

    1 简介 ssh登录提供两种认证方式:口令(密码)认证方式和密钥认证方式.其中口令(密码)认证方式是我们最常用的一种,这里介绍密钥认证方式登录到linux/unix的方法. 使用密钥登录分为3步: 1 ...

  6. Oracle性能优化之oracle里表、索引、列的统计信息

    一.表的统计信息 表的统计信息用于描述表的详细信息,包括记录数(num_rows).表块的数量(blocks).平均行长度(avg_row_len)等典型维度.这些维度可以通过数据字典表DBA_TAB ...

  7. Ubuntu proxychains && setProxy及 unsetProxy

    https://www.socks-proxy.net/ (ubuntu proxy )[ lantern -addr 0.0.0.0:8787 proxychains4 printenv http: ...

  8. Python开发【模块】:Urllib(二)

    Urllib实战 1.爬取糗事百科中段子和用户名: 代码实例: # 爬取网站页面内容 import re import urllib.request url = 'https://www.qiushi ...

  9. Python并行编程(十二):进程同步

    1.基本概念 多个进程可以协同工作来完成一项任务,通常需要共享数据.所以在多进程之间保持数据的一致性就很重要,需要共享数据协同的进程必须以适当的策略来读写数据.同步原语和线程的库类似. - Lock: ...

  10. 信号(Django信号、Flask信号、Scrapy信号)

    简介 Django.Flask.scrapy都包含了一个“信号分配器”,使得当一些动作在框架的其他地方发生的时候,解耦的应用可以得到提醒. 通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒 ...