webpack 独立打包 css 文件

最新推荐文章于 2024-07-15 07:45:00 发布

原创最新推荐文章于 2024-07-15 07:45:00 发布 · 9.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

JS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用 extract-text-webpack-plugin 插件来分离 CSS 文件，并展示了如何通过配置 webpack 实现不同类型的样式文件（如 SASS 和 LESS）的独立编译。

插件地址： extract-text-webpack-plugin

安装插件

npm install extract-text-webpack-plugin –save-dev

使用方法，在 webpack.config.js 中增加如下配置

plugins: [
    new ExtractTextPlugin('app.css')
]

实例：编译多种 css

// 这里只是做一个演示，实际上不需要单独编译出 less 文件
var extractCSS = new ExtractTextPlugin('./css/[name].css')
var extractLESS = new ExtractTextPlugin('./css/[name].less')

module.exports = {
    module : {
        loaders: [
            {
                test: /\.sass/,
                loader: extractCSS.extract('style', 'css!sass')
            },
            {
                test: /\.less/,
                loader: extractCSS.extract('style', 'css!less')
            }
        ]
    },
    plugins: [
        extractCSS,
        extractLESS
    ]
}