How to have global css styles alongside in-js component styles using Webpack and Angular?

Question

I have a Webpack + Angular project and I want to have a separate global stylesheet alongside the component styles, similar to what angular-cli does out of the box. I am using sass for the component styles, and want to have a global tailwind built stylesheet. I want the global styles module extracted into the head with something like MiniCssExtractPlugin. The issue is that I am getting a "ERROR in window is not defined" when trying to do this. Here is my webpack style config, which loads component styles as expected:

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

To add a global tailwind module, I added another webpack entry pointing to the sass file:

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

and the postcss loader like so:

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

I am getting "ERROR in window is not defined" when building the project. What is wrong with my config?

score 0 · Answer 1 · answered Mar 18 '19 at 15:28

I've looked closer at how angular-cli processes the global styles and this revised configuration worked for me:

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

The solutions being to process the component and global styles separately. raw-loader is working better than css-loader and to-string-loader. This dev config, with style-loader, also allows for hot module replacement while editing both the component and tailwind styles.

How to have global css styles alongside in-js component styles using Webpack and Angular?

1 Answers1