extract-text-webpack-plugin（you may need an appropriate loader to handle this file type）

在使用extract-text-webpack-plugin插件编译sass文件生成一个单独的css文件通过link导入到html中，经查询此方法的优点在于避免直接将css打包入bundle.js中，造成样式混乱。

1bug：在安装了style-loader，css-loader，sass-loader之后，配置文件如下：

报错：

开始我以为是 没有安装node-css，于是安装了node-css。注意：使用npm安装时报了错，主要是跟register有关，具体报错没截图，查过之后发现原因可能是npm服务器在国外，所以换成了淘宝镜像安装。

上图报错中我一直认为是sass-loader没有编译成功，但报错底下信息显示：

这里可以很明显的看到它使用style-loader去解析.scss文件，所以报错，所以问题出在上图配置文件中，既然已经生成了单独的css文件并且在头部导入，那就不应该用style-loader解析文件，所以去掉配置文件中style-loader就可以打包成功了！

tips：

1.配置文件中module里面的loaders都是为entry中文件配置的，因此相关文件应该在entry中require或者import；

2.在使用插件为模块生成单独文件时，plugins中的根路径即为output中的路径，写相对路径也是根据output中的路径而来；

时间： 2024-10-28 07:43:45

extract-text-webpack-plugin（you may need an appropriate loader to handle this file type）的相关文章

webpack 3.8 使用 extract-text-webpack-plugin 3.0 抽取css失败：You may need an appropriate loader to handle this file type.

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; | } @ .

webpack入门（四）——webpack loader 和plugin

什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffeeScript或者JSX. loaders 特点: 1. 可以链式拼接.他们用在通向文件的管道,最后一个loader预期返回一个javascript,其它Loader可以返回任意格式给下一个loader. 2. loaders可以是同步的,也可以是异步的. 3. loaders是用node.js来跑,

webpack入门（2）

webpack入门(2) ps:每个案例都是基于前一个案例改造的 webpack入门(1) 戳这里 案例源码戳这里 十二.ProvidePlugin 自动加载模块 new webpack.ProvidePlugin() 上面的案例太复杂,下面再新建一个简单的项目来讲解 案例16 -- 全局引入jquery 新建一个项目,如下 [webpack] |-- src |-- index.html |-- index.less |-- index.js |-- package.json |-- webp

Webpack实战（五）：轻松读懂Webpack如何分离样式文件

在上一篇文章中我给大家分享了预处理器(loader),里面讲到了style-loader 和css-loader,有关样式引入的问题,但是上面的样式文件只是引入到style标签里面,并不是我想要的样式文件独立分离. 如果想了解有关css-loader和style-loader可以参考以下地址: Webpack实战(四):教教你如何轻松搞定-预处理器(loader) 通过js引入样式文件只是把样式添加到style标签内,而不是引入一个独立的css文件,一般来说,在生产环境下,我们希望样式存在于CS

Maven提高篇系列之（六）——编写自己的Plugin（本系列完）

这是一个Maven提高篇的系列,包含有以下文章: Maven提高篇系列之(一)——多模块 vs 继承 Maven提高篇系列之(二)——配置Plugin到某个Phase(以Selenium集成测试为例) Maven提高篇系列之(三)——使用自己Repository(Nexus) Maven提高篇系列之(四)——使用Profile Maven提高篇系列之(五)——处理依赖冲突 Maven提高篇系列之(六)——编写自己的Plugin(本系列完) 在本系列的上一篇文章中,我们讲到了如何处理依赖冲突,在本

详解 ML2 Core Plugin（II） - 每天5分钟玩转 OpenStack（72）

上一节我们讨论了 ML2 Plugin 解决的问题,本节将继续研究 ML2 的架构. ML2 对二层网络进行抽象和建模,引入了 type driver 和 mechansim driver. 这两类 driver 解耦了 Neutron 所支持的网络类型(type)与访问这些网络类型的机制(mechanism),其结果就是使得 ML2 具有非常好的弹性,易于扩展,能够灵活支持多种 type 和 mechanism. Type Driver Neutron 支持的每一种网络类型都有一个对应的 ML

webpack入门（六） API in modules

A quick summary of all methods and variables available in code compiled with webpack. 用webpack编译的一些变量和方法的快速总结 Basic require CommonJs require(dependency: String) Returns the exports from a dependency. The call is sync. No request to the server is fire

webpack 入门（0）（官翻）

0 建议最好全局先安装一下webpack npm install webpack -g 1 新建一个文件夹,打开该文件夹,初始化package.json文件,安装好webpack依赖 (都是基础的linux命令操作,必会) mkdir webpack-demo && cd webpack-demo //新建webpack-demo文件夹并打开该文件 npm init -y //初始化package.json文件,-y可以省去一大通的默认回车设置 npm install --save-dev

Webpack Plugin

[Webpack Plugin] Since Loaders only execute transforms on a per-file basis, plugins are most commonly used (but not limited to) performing actions and custom functionality on "compilations" or "chunks" of your bundled modules (and so m