在从 SCSS 代码生成 CSS 之前生成图标类答案

【问题标题】：Generate icon classes before generating CSS from SCSS code在从 SCSS 代码生成 CSS 之前生成图标类
【发布时间】：2020-10-10 11:11:55
【问题描述】：

我正在尝试使用 webpack 和 fractal-build 创建一个 UI 库。在这里，我正在执行以下操作：从 SVG 生成图标 / 使用 SCSS 代码中的图标类将其扩展到元素的类。

从 SCSS 代码示例中扩展的 SVG 文件和图标类生成的 CSS 类：

.icon-<svg-file-name>:before {
  content: '<content-id>';
  <Style attributes for icons>
}


.close {
  @extend .icon-close;
}

Extend 对我不起作用，因为在从 SCSS 生成 CSS 期间找不到图标类。请帮助我如何实现它。下面是我的 webpack 配置的快照：

// Process CSS with PostCSS.
// https://github.com/postcss/postcss-loader
POSTCSS: {
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',
        plugins: () => [
            // Add vendor prefixes to CSS rules. https://github.com/postcss/autoprefixer
            autoprefixer,
        ],
    },
},

// Compile SASS to CSS.
// https://github.com/webpack-contrib/sass-loader
SASS: {
    loader: 'sass-loader',
    options: {
        sassOptions: {
            importer: globImporter(),
        },
        prependData: "$dateTimestamp: " + dateTimestamp + ";",
    },
},

// Inject CSS into the DOM.
// https://github.com/webpack-contrib/style-loader
STYLE: {
    loader: 'style-loader',
},

// Generates fonts from SVG icons.
// https://github.com/jeerbl/webfonts-loader
WEBFONT: {
    loader: 'webfonts-loader',
},

以及请求模块的代码：

module: {
        // An array of rules which are matched to requests when modules are created.
        // These rules can modify how the module is created.
        // They can apply loaders to the module, or modify the parser.
        rules: [
            {
                // Parse all Javascript files.
                test: /\.js$/, // use this loader for JavaScript files
                enforce: 'pre', // this is a pre-loader, which helps reinforce that this must run before normal loaders
                exclude: /node_modules/,
                use: [
                    WEBPACK_OPTIONS.LOADERS.BABEL,
                ],
            },
            {
                // Parse all font files.
                test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [WEBPACK_OPTIONS.LOADERS.FONT],
            },
            {
                // Parse all icon font files.
                test: /\.font\.js/,
                use: [
                    WEBPACK_OPTIONS.LOADERS.MINI_CSS_EXTRACT(webpackEnv),
                    WEBPACK_OPTIONS.LOADERS.CSS,
                    WEBPACK_OPTIONS.LOADERS.SASS,
                    WEBPACK_OPTIONS.LOADERS.WEBFONT,
                ],
            },
            {
                // Parse all style files.
                test: /\.s?css$/, // use this loader for SASS & CSS files
                exclude: [/node_modules/],
                use: [
                    WEBPACK_OPTIONS.LOADERS.STYLE,
                    WEBPACK_OPTIONS.LOADERS.MINI_CSS_EXTRACT(webpackEnv),
                    WEBPACK_OPTIONS.LOADERS.CSS,
                    WEBPACK_OPTIONS.LOADERS.POSTCSS,
                    WEBPACK_OPTIONS.LOADERS.SASS,
                ],
            },

        ],
    },

【问题讨论】：

那么你有一个包含所有 svg 文件的文件夹吗？因为您可以有一个预编译步骤（在 webpack 运行之前）创建一个包含所有 svg 的 _index.scss 文件？然后可以将该文件作为已经生成的文件合并到其余的 scss 文件中。
是的，我有一个包含所有 SVG 文件的文件夹。我正在寻找类似的解决方案，需要一些与 webpack 配置相关的指针。

标签： sass webpack-4 webpack-style-loader sass-loader

【解决方案1】：

作为上述查询的解决方案 - 我在 webfonts-loader 配置中使用 scssFile: true 生成了 .scss 文件。因此，无论何时解析 SCSS 文件，它都能够找到图标类并解决问题。

【讨论】：