Webpack 3.9.1 - 如何将 LESS 文件合并到一个 CSS 文件中？答案

【问题标题】：Webpack 3.9.1 - How do I combine LESS files into one CSS file?Webpack 3.9.1 - 如何将 LESS 文件合并到一个 CSS 文件中？
【发布时间】：2018-05-17 05:01:02
【问题描述】：

我对 Webpack 很陌生，我不确定如何处理 LESS。我想要有很多 LESS 文件，并且我希望它们在运行 npm run build 后编译成一个 CSS 文件。这将产生一个包含所有内容的style.css 文件。

我的webpack.config.js 看起来像这样：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: 
        [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader", // creates style nodes from JS strings
                    path: path.resolve(__dirname, 'src')
                }, {
                    loader: "css-loader", // translates CSS into CommonJS
                    path: path.resolve(__dirname, 'src')
                }]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }
        ]

    },
    plugins: [new HtmlWebpackPlugin()]
};

如何配置 webpack 以使其将所有 LESS 文件合并到一个 CSS 文件中？

【问题讨论】：

标签： html css node.js webpack

【解决方案1】：

您可以使用名为extract-text-webpack-plugin 的插件来实现此目的。根据他们的文档，这个插件将所有必需的*.css 模块在入口块中移动到一个单独的 CSS 文件中。因此，您的样式不再内联到 JS 包中，而是在单独的 CSS 文件中 (styles.css)。当然，在您的情况下，您首先必须将 .less 文件解析为 .css，然后将它们捆绑到一个文件中。

你可以像这样修改你的 webpack 配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /\.less$/,
      use: ExtractTextPlugin.extract({ <---- Use the plugin here to extract the styles
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: ['file-loader']
    },
    {
      test: /\.json$/,
      loader: 'json-loader'
    }
  ]
},
plugins: [
  new HtmlWebpackPlugin(),
  new ExtractTextPlugin("styles.css"),
]};

【讨论】：

.less 的加载器不应该是less-loader 而不是css-loader？

【解决方案2】：

您可以使用extract-text-webpack-plugin 制作一个 css 文件。但仅在生产构建时才这样做，而不是在开发时这样做。

我会考虑使用 Webpack less-loader。它涵盖了生产版本here

【讨论】：