избежать избыточного импорта sass в клиентский пакет webpack3 - PullRequest
Новая
       42

избежать избыточного импорта sass в клиентский пакет webpack3

0 голосов
/ 01 июня 2018

У меня проблема с тем, что общие sass-стили в моем проектеactjs избыточно заканчиваются в клиентском комплекте…

1) У меня есть набор базовых стилей: 

/src/frontend/sass/
    base.scss  the master file, which imports the following…
    ├ common.sass
    ├ colors.sass
    ├ breakpoints.sass
    ├ forms.sass
    └ ...

2) и проект веб-пакета с файлами «.sass» на компонент… 

Input/style.sass
Modal/style.sass
TeaserPage/style.sass
…

3) каждый компонентфайлы стилей получают '@import base.scss', внедренный в webpack.config, так что я могу получать доступ к переменным, смешивать или расширять класс ... 

        {
            test: /\.(sass|scss)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'postcss-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            data: `@import '${resolve(__dirname, 'src', 'frontend', 'sass').replace(/\\/g, '/')}/base';`,
                            sourceMap: false
                        }
                    }
                ]
            })
        },

Это нормально для разработки (с react-hot-loader), но в режиме выпуска, когда я хочу создать compact клиентский пакет, это приводит к 40-кратному резервированию (… из 40 компонентов).

проблема в → конечно → не → новая , все же, что было бы правильным решением с webpack 3?

  • Сначала конкатенация, затем обработка?
  • A (рабочий, устаревший) import-once модуль?
  • (ужасный обходной путь): keeping переменных / mixins против базовых стилей разделяют (что порвало бы формы или точки прерывания на части)

  • или я мог бы как-то сделать конфигурацию webpack как ...?

    (читайте ↑ снизу вверх ↑, если я правильно понимаю синтаксис веб-пакета…) 

    use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
        {
            loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader',
            3) do your sass→css conversion and post thing
        {
            loader: 'sass-loader',
            2) ...load (concatenate to 1) component styles
        },
        {
            loader: 'sass-loader',
            1) ...load that base.sass
        },

    ]
})
    • … или есть устаревшая (или в эти дни даже включены в самом веб-пакете?) Где-нибудь функционал sass-import-Once?

Я нашел оптимизатор -css-assets-webpack-plugin (для webpack 3 вам нужно @3.2.0), который работает как своего рода исправление.Убирает беспорядок как последний этап, но это не то, что я бы предпочел (то есть: избегать создания беспорядка путем импорта один раз / конкатенация сначала ...).

...