Question

我对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文件中？

Answer 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"),
]};

Answer 2

您可以使用extract-text-webpack-plugin制作一个css文件。但是，只有在开发过程中才能进行生产构建。

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

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

2 个答案: