Как использовать глобальные стили CSS вместе со стилями компонентов in-js, используя Webpack и Angular? - PullRequest
Новая
       29

Как использовать глобальные стили CSS вместе со стилями компонентов in-js, используя Webpack и Angular?

0 голосов
/ 18 марта 2019

У меня есть проект Webpack + Angular, и я хочу иметь отдельную глобальную таблицу стилей наряду со стилями компонентов, аналогично тому, что angular-cli делает из коробки.Я использую sass для стилей компонентов, и хочу иметь глобальную таблицу стилей, созданную для попутного ветра.Я хочу, чтобы модуль глобальных стилей был извлечен в голову чем-то вроде MiniCssExtractPlugin.Проблема в том, что я получаю «ОШИБКА в окне не определено» при попытке сделать это.Вот мой конфиг стиля webpack, который загружает стили компонентов, как и ожидалось: 

{
    test: /\.(scss|css)$/,
    use: [
        'to-string-loader', // Return component styles as strings
        {
            loader: 'css-loader', // Translates CSS into CommonJS
            options: {
                sourceMap: true
            }
        },
        {
            loader: 'sass-loader', // Compiles Sass to CSS, using Node Sass by default
            options: {
                sourceMap: true
            }
        },
    ]
}

Чтобы добавить глобальный модуль попутного ветра, я добавил еще одну запись webpack, указывающую на файл sass: 

entry: {
    app: './src/main',
    styles: './src/assets/styles/styles'
}

и загрузчик postcss выглядит так: 

{
    test: /\.(scss|css)$/,
    use: [
        'to-string-loader', // Return component styles as strings
        {
           loader: 'style-loader',
           options: {
               sourceMap: false
           }
       },
        {
            loader: 'css-loader', // Translates CSS into CommonJS
            options: {
                sourceMap: true
            }
        },
        {
            loader: 'postcss-loader', // Process tailwindcss,
            options: {
                plugins: [
                    tailwindcss('./tailwind.js'),
                    require('autoprefixer'),
                ],
            }
        },
        {
            loader: 'sass-loader', // Compiles Sass to CSS, using Node Sass by default
            options: {
                sourceMap: true
            }
        },
    ]
}

Я получаю сообщение "ОШИБКА в окне не определена" при сборке проекта.Что не так с моим конфигом?

1 Ответ

0 голосов
/ 18 марта 2019

Я посмотрел ближе на то, как angular-cli обрабатывает глобальные стили, и эта пересмотренная конфигурация сработала для меня: 

{
    // Process the component styles
    exclude: path.resolve(__dirname, 'src/assets/styles/styles'),
    test: /\.(scss)$/,
    use: [
        { loader: 'raw-loader' }, // Load component css as raw strings
        {
            loader: 'sass-loader', // Compiles Sass to CSS, using Node Sass by default
            options: {
                sourceMap: true
            }
        },
    ]
},
{
    // Process the global tailwind styles
    include: path.resolve(__dirname, 'src/assets/styles/styles'),
    test: /\.(scss)$/,
    use: [
        {
            loader: 'style-loader',
            options: {
                sourceMap: false
            }
        },
        {
            loader: 'postcss-loader', // Process tailwindcss,
            options: {
                plugins: [
                    tailwindcss('./tailwind.js'),
                    require('autoprefixer'),
                ],
            }
        },
        {
            loader: 'sass-loader', // Compiles Sass to CSS, using Node Sass by default
            options: {
                sourceMap: false
            }
        },
    ]
}

Решения заключаются в том, чтобы обрабатывать компонент и глобальные стили отдельно.raw-loader работает лучше, чем css-loader и to-string-loader.Этот dev-конфигуратор с style-loader также позволяет выполнять горячую замену модуля при редактировании стилей компонента и попутного ветра.

...