javascript - 我可以看更少的文件更改并通过 webpack 将其转换为 css 文件吗？

Question

在我的项目中，我想查看我所有的*.less文件更改，并将其转换为*.css. 我gulp以前也这样做过。有可能做到webpack吗？

我发现如果我没有导入less文件，它就找不到了webpack，所以我被这个问题困住了。

有我的目录，我想转换src/**/*.less为dist/**/*.css：

|-- src 
    |-- a.less
    |-- b.less
    |-- order
        |-- c.less


|-- dist
     |-- a.css
     |-- b.css
     |-- order
         |-- c.css

有我的webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: "./src",
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
  watch: true,
  watchOptions: {
    aggregateTimeout: 200,
    poll: 1000,
    ignored: /node_modules/
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: 'less-loader',
      }
    ]
  }
};

标签： javascriptwebpackwebpack-4

Answer 1

您可以使用。lessloader 并在 webpack 配置文件中定义了加载 less 加载器的规则，如下所示：

如果您需要从特定目录中选择文件，您可以使用include选项定义目录路径。

module.exports = {
    module: {
        rules: 
            {
                test: /\.less$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { 
                      loader: 'less-loader',
                      include: [
                        path.resolve(__dirname, 'app/styles'),
                     ]
                   }
                ]
            }
        ]
    },