0

我正在尝试获取特定文件夹中的所有 sass 文件，并将它们复制/转换为不同文件夹中的 css 文件，同时保留文件夹结构。喜欢：

  • 源代码
    • 文件夹1
      • test1.scss
    • 文件夹2
      • test2.scss
      • 文件夹3
        • test3.scss

进入

  • 目的地
    • 文件夹1
      • test1.css
    • 文件夹2
      • test2.css
      • 文件夹3
        • test3.css

我正在尝试使用复制 webpack 插件来复制所有 src scss 文件，以及使用 node-sass 转换它们的转换选项，这似乎有效，除了它不会将文件重命名为 .css 并且我可以'不知道如何解决这个问题。有任何想法吗？

从我的 webpack.config.js 中截取：

{
      context: path.join(__dirname, "src"),
      from: "**/*.scss",
      to: path.join(__dirname, "dest"),
      transform(content, path) {
        const result = sass.renderSync({ file: path });
        return result.css.toString();
      }
    }
4

1 回答 1

0

通过使用转换文件webpack-copy-plugin并不是处理资产的正确方法。它更像是骇客/反模式方式。相反，您应该依赖适当的加载器管道。Webpack 加载器是专门为处理这个任务而设计的。你需要 4 件事来完成你的任务。

  • 要处理 SASS/SCSS 文件，您应该使用sass-loader.
  • 使用css-loader 将 CSS 转换为 CommonJS 格式。
  • 增强您的配置，mini-css-extract-plugin将 JS 代码中的 CSS 提取到实际的 CSS 文件中。
  • 使用对象语法单独指定您的 SASS 目标文件。这是在 dist 文件夹中保留文件夹结构的关键。entry 对象的键就像 dist/dest 中的文件夹结构。（见下文）

您的配置如下所示：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    output: {
        // Whatever name pattern you need.
        filename: `[name]/bundle-[contenthash].js`,
        path: path.resolve(__dirname, 'dest')
    },

    entry: {
        'folder1': './src/folder1/test1.scss',
        'folder2': './src/folder2/test2.scss',
        'folder2/folder3': './src/folder2/folder3/test3.scss'
    },

    modules: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [

                    // Mark content for extraction into seperate CSS file
                    MiniCssExtractPlugin.loader,

                    // Translates CSS into CommonJS
                    'css-loader',
                    
                    // Compiles Sass to CSS
                    'sass-loader'
                ]
            }
        ]
    },

    plugins: [
        // Run the actual plugin to extract CSS into separate CSS files
        new MiniCssExtractPlugin({
            // Whatever name pattern you need
            filename: `[name].css`
        })
    ]

};

filename用你需要的模式调整你的。

或者，如果您希望坚持相同的方法，则to复制插件配置的参数接受 webpack 样式的输出模式。类似的东西可以为你工作：

// You can use .css instead of [ext]
to: '[path][name].[contenthash].[ext]'

最后，作为最后一个选项，如果 SASS 文件太多，那么您可以使用glob 包entry动态构造 Webpack对象，然后在模块配置中使用它。

于 2020-07-15T03:48:33.347 回答