Webpack:如何合并css和更少的内容，然后应用cssnano [英] Webpack: How to merge css and less, THEN apply cssnano

问题描述

我设法将css和更少的资源(从javascript中导入")编译为all-my-LESS|CSS，使用ExtractTextPlugin提取它们，然后将它们与MergeFilesPlugin合并到combinedStyles.css.

I managed to compile my css and less resources („imported" from javascript) to all-my-LESS|CSS, extract them using ExtractTextPlugin and merge them together with MergeFilesPlugin to combinedStyles.css.

我所缺少的位:如何在最后运行cssnano(例如，通过postcss?)? (哦，虽然我是内联源地图，但我没有设法生成一个外部combinedStyles.map文件.)

The bit I am missing: How to run cssnano (e.g. through postcss?) on top of that as the finishing bit? (Oh, and while I habe inline source maps, I didn't manage to generate an external combinedStyles.map file).

这是我组合的webpack.config.babel.js(忽略babel位，只是意味着，您可以使用更高级的import语句在ES6中编写它):

This is my combined webpack.config.babel.js (ignore the babel bit, just means, you may write it in ES6, with fancier import statements):

import path from 'path';

const webpack = require('webpack'); //to access built-in plugins
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import MergeFilesPlugin from 'merge-files-webpack-plugin';

const extractCSS = new ExtractTextPlugin("all-my-CSS.css");
const extractLESS = new ExtractTextPlugin("all-my-LESS.css");

export default {
    entry: [ './src/index_5.js' ],
    output: {
        path: path.resolve( 'dist')
        filename: 'bundle.js',
        sourceMapFilename: './bundle.js.map'
    },

    module: {
        rules: [{
                test: /\.css$/,
                use: extractCSS.extract(
                    [{  // This is basically "use"
                        loader: "css-loader",
                        options: {
                            minimize: false, // done later
                            sourceMap: true,
                            modules: false, // no css modules, all global styles
                        }
                    }]
                )
            },
            {
                test: /\.less$/,
                use: extractLESS.extract(  // This is basically "use"
                    [// No style-loader here! We want this external!
                    {
                        loader: "css-loader", // translates CSS into CommonJS
                        options: {
                            minimize: false,
                            sourceMap: true
                        }
                    }, {
                        loader: "less-loader", // compiles Less to CSS
                        options: {
                            sourceMap: true,
                        }
                    }]
                )
            }
        ] // rules
    }, // module

    devtool: 'inline-source-map',
    devServer: { inline: true },

    plugins: [
        extractCSS,
        extractLESS,
        new MergeFilesPlugin({
            filename: 'combinedStyles.css', //output filename
            test: /\.css$/,
            deleteSourceFiles: false // for now
        })
    ]
};

推荐答案

我在css-nano和css-nano之间添加了postcss-loader，请检查是否有帮助.

I have added postcss-loader with css-nano, check if it helps.

我也看不到这里需要使用MergeFilesPlugins(只是我的看法). ExtractTextPlugin在这里可能有用.

Also I don't see here need to use MergeFilesPlugins ( just my opinion) . ExtractTextPlugin can be useful here.

只需使用一个ExtractTextPlugin并将所有css或更少的文件放在一个文件夹(带有.css或.less ext)中，加载程序将选择性地应用于它们，以后在插件中只需使用

Just use one ExtractTextPlugin and put all css or less file in one folder( with .css or .less ext ), loaders will be applied to them selectively and later in plugins just use

new ExtractTextPlugin('style.css')

提取公共css文件.

使用cssnano:

[{
                test: /\.css$/,
                use: ExtractTextPlugin.extract(
                    [{  // This is basically "use"
                        loader: "css-loader",
                        options: {
                            minimize: false, // done later
                            sourceMap: true,
                            modules: false, // no css modules, all global styles
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                                plugins: function () {
                                        return [
                                        require('cssnano')({
                                            autoprefixer: false,
                                            safe: true
                                            })
                                        ];
                                }
                           }
                    }]
                )
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract(  // This is basically "use"
                    [// No style-loader here! We want this external!
                    {
                        loader: "css-loader", // translates CSS into CommonJS
                        options: {
                            minimize: false,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                                plugins: function () {
                                        return [
                                        require('cssnano')({
                                            autoprefixer: false,
                                            safe: true
                                            })
                                        ];
                                 }
                            }
                    },
                    {
                        loader: "less-loader", // compiles Less to CSS
                        options: {
                            sourceMap: true,
                        }
                    }]
                )
            }
        ]

这篇关于Webpack:如何合并css和更少的内容，然后应用cssnano的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！