使用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. Jenkins反序列化漏洞cve-2017-1000353

    一.漏洞原理: 本地没有环境:参考:https://blogs.securiteam.com/index.php/archives/3171    进行学习理解记录. 首先这是一个java反序列化漏洞 ...

  2. 一、微信小游戏开发 --- 初次在微信开发者工具里跑Egret小游戏项目

    尝试下Egret的小游戏开发,学习,学习,干IT,不学习,就得落后啊... 相关教程: Egret微信小游戏教程 微信公众平台-微信小游戏教程 微信公众平台-微信小游戏接入指南 开发版本: Egret ...

  3. 【BZOJ3011】[Usaco2012 Dec]Running Away From the Barn 可并堆

    [BZOJ3011][Usaco2012 Dec]Running Away From the Barn Description It's milking time at Farmer John's f ...

  4. 【Android】TextView动态设置android:drawableLeft|Right|Top|Bottom,SetColor

    Android中有时需动态设置控件四周的drawble图片,这个时候就需要调用 setCompoundDrawables(left, top, right, bottom),四个参数类型都是drawa ...

  5. mybatis按姓名或手机号搜索

    1.AND ((USER_NAME LIKE '%'||#{searchKey}||'%') OR (MOBILE_PHONE LIKE '%'||#{searchKey}||'%'))2. < ...

  6. MySQL Server has gone away报错原因汇总分析(转自:http://cenalulu.github.io/mysql/mysql-has-gone-away/)

    原因1. MySQL 服务宕了 判断是否属于这个原因的方法很简单,执行以下命令,查看mysql的运行时长 $ mysql -uroot -p -e "show global status l ...

  7. apache工作模式worker以及prefork的切换

    apache比较常用的工作模式有worker以及prefork两种方式. 如果在编译时候不指定,系统默认的是prefork模式:如果需要换成worker模式,需要在编译的时候带上编译参数:--with ...

  8. spring cloud多个消费端重复定义feign client问题

    spring cloud消费端调用服务提供者,有两种方式rest+ribbon和Feign,Feign是一个声明式的伪Http客户端更为简单易用,所以我们项目选用Feign作为服务通讯方式 项目有6个 ...

  9. SaltStack生产案例-服务部署(redis,mysql,apache+php,haproxy+keepalived)

    顺序代码资料链接 课上资料.zip 接上篇:SaltStack生产案例-系统初始化 1,redis 主从 2,mysql 主从 2.1 mysql-install.sls (安装 初始化) 2.2   ...

  10. sql_q.format

    field_q_insert = 'id, title, number, created,content'sql_q = 'INSERT INTO testquestion ({}) VALUES ( ...