Сгенерируйте классы значков перед генерацией CSS из кода S CSS - PullRequest
Новая
       129

Сгенерируйте классы значков перед генерацией CSS из кода S CSS

0 голосов
/ 20 июня 2020

Я пытаюсь создать UI-библиотеку с помощью webpack и фрактальной сборки. Здесь я делаю следующее: генерирую значки из SVG / использую классы значков в коде S CSS, чтобы расширить его до класса элемента.

CSS классы, генерируемые из файлов SVG и расширенные классы значков в примере кода S CSS: 

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


.close {
  @extend .icon-close;
}

Extend у меня не работает, потому что класс значка не найден во время генерации CSS из S CSS. Пожалуйста, помогите мне, как этого можно достичь. Ниже приведен снимок моей конфигурации веб-пакета: 

// 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,
                ],
            },

        ],
    },

1 Ответ

0 голосов
/ 02 июля 2020

В качестве решения вышеприведенного запроса - я создал файл .s css, используя scssFile: true в конфигурации веб-загрузчика. Итак, всякий раз, когда файлы S CSS анализируются, он может найти классы значков, и проблема будет решена.

...