webpack 3.8.1 使用 extract-text-webpack-plugin 3.0.2 抽取css时失败,报错:

ERROR in ./src/static/style/localTime.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .localTimeBox {
| color: red;
| }
@ ./node_modules/style-loader!./src/static/style/localTime.css 4:14-42 webpack-build.config.js 配置为:
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'style-loader!css-loader', {publicPath: '../'})
}
]
},
plugins: [
new ExtractTextPlugin('css/bundle.min.css', {allChunks: true}),
]

解决方法:

将webpack-build.config.js 配置改为:

module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader'],
publicPath: '../'
})
}
]
},
plugins: [
new ExtractTextPlugin('css/bundle.min.css', {allChunks: true}),
]
 

问题就解决了。具体原因好像是版本的写法问题。

webpack 3.8 使用 extract-text-webpack-plugin 3.0 抽取css失败:You may need an appropriate loader to handle this file type.的更多相关文章

  1. webpack从零开始第1课:安装webpack和webpack-dev-server

    原文地址:https://segmentfault.com/a/1190000012536871 webpack目录 第1课: 安装webpack和webpack-dev-server 第2课: 配置 ...

  2. Webpack实战(六):如何优雅地运用样式CSS预处理

    上一篇文章中,我主要分享了<Webpack如何分离样式文件>CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序,css预处理指的是在开发中我们经常会使用一些样式预编译 ...

  3. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

  4. 阅读webpack代码笔记:antd-layout的webpack.config.prod.js

    'use strict'; const autoprefixer = require('autoprefixer');//自动补全css前缀 const path = require('path'); ...

  5. webpack入门和实战(一):webpack配置及技巧

    一.全面理解webpack 1.什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都 ...

  6. 【Webpack的使用指南 02】Webpack的常用解决方案

    说是解决方案实际上更像是webpack的插件索引. 写这一篇的目的是为了形成一个所以,将来要用时直接来查找即可. 索引目录 1.自动构建HTML,可压缩空格,可给引用的js加版本号或随机数:html- ...

  7. Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

    0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...

  8. webpack 快速入门 系列 —— 初步认识 webpack

    初步认识 webpack webpack 是一种构建工具 webpack 是构建工具中的一种. 所谓构建,就是将资源转成浏览器可以识别的.比如我们用 less.es6 写代码,浏览器不能识别 less ...

  9. [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

    本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...

随机推荐

  1. python-集合类型

    集合具有唯一性(集合中的元素各不相同),无序性,确定性(集合中的元素是不可改变的,不能是列表,字典以及集合本身) 1.add(self, *args, **kwargs),union(self, *a ...

  2. ecshop 全系列版本网站漏洞 远程代码执行sql注入漏洞

    ecshop漏洞于2018年9月12日被某安全组织披露爆出,该漏洞受影响范围较广,ecshop2.73版本以及目前最新的3.0.3.6.4.0版本都受此次ecshop漏洞的影响,主要漏洞是利用远程代码 ...

  3. java时间"yyyy-mm-dd HH:mm:ss"转成Date

    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String time="1 ...

  4. HyperLedger Fabric 1.4 区块链应用场景(3.1)

    比特币是区块链应用最早的场景,随着比特币安全稳定运行多年以后,数字货币的场景应用遍地开花,各种山寨币泛滥,通过ICO(Initial Coin Offering 首次币发行)就能融到大量资金,上市后的 ...

  5. 洛谷P3958 奶酪

    题目链接 这道题貌似可以用BFS来写吧qwq. 我用的是并查集,把联通的洞合并在同一个几何中,最后只需要判断是否存在上表面和下表面有相同集合的洞即可. 但是需要注意的是还有这样的一种情况:有一个大洞贯 ...

  6. linux的常用易忘命令

    1.查看软件安装路径 [root@localhost ~]# which gcc /usr/bin/gcc 查询进程 ps -ef |grep redis 查看端口 netstat  -lntp |g ...

  7. 常用js方法合集

    var Default = { init: function () { }, addCookie: function (name,data) { var expdate = new Date(); / ...

  8. SVN脱离锁定的几种方法

    SVN经常出现被锁定而无法提交的问题,选择解锁又提示没有文件被锁定,很是头疼.这里整理了一下SVN 被锁定的几种解决方法: 1.出现这个问题后使用“清理”即"Clean up"功能 ...

  9. 开发react的一些记录

    1.keyboard事件返回的对象SyntheticKeyboardEvent全部是null 解决方法:SyntheticKeyboardEvent的type,which,timeStamp可以得到你 ...

  10. 使用hibernate连接Oracle时的权限问题

    在使用hibernate对象关系映射连接和创建表的时候,会涉及到很多权限问题,有些数据库管理会将权限设的很细,我们可以根据后台日志错误和异常信息作出判断. 比如下图所示这个错误(这是我在给银行投产系统 ...