如何将 sass 个文件导出到保留文件夹结构的 dist 文件夹？

Question

我正在尝试获取特定文件夹中的所有 sass 文件，并将它们 copy/transform 放入不同文件夹中的 css 文件中，同时保留文件夹结构。喜欢：

来源
- 文件夹1
  - test1.scss
- 文件夹2
  - test2.scss
  - 文件夹3
    - test3.scss

进入

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

我正在尝试使用 copy webpack 插件复制所有 src scss 文件，并使用 transform 选项使用 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();
      }
    }

Answer 1

使用 webpack-copy-plugin 转换文件并不是处理资产的正确方法。它更像是 hackish/anti-pattern 方式。相反，您应该依赖适当的加载程序管道。 Webpack 加载器专门设计用于处理此任务。你需要 4 件事来完成你的任务。

要处理 SASS/SCSS 个文件，您应该使用 sass-loader。
使用 css-loader 将 CSS 转换为 CommonJS 格式。
使用 mini-css-extract-plugin 增强您的配置以将 CSS 从 JS 代码提取到实际的 CSS 文件中。
使用 object syntax 单独指定您的 SASS 目标文件。 这是在 dist 文件夹中保留文件夹结构的关键。 条目对象 的键就像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 package 动态构建 Webpack entry 对象，然后在您的模块中使用它配置。

如何将 sass 个文件导出到保留文件夹结构的 dist 文件夹？

How to export sass files to dist folder preserving folder structure?

webpack

sass

node-sass

sass-loader

copy-webpack-plugin