How to enable scss in project ?

[markopredovic]

@rossmc , what is a way to edit webconfig in this project setup, to enable scss ?

[rossmc]

Hi @markopredovic,

I haven't done this myself in PWA Studio yet but imagine you will need to:

Install the webpack sass-loader:
https://github.com/webpack-contrib/sass-loader

And update the webpack.config.js file to include something like.

config.module.rules.push({
        test: /\.scss$/,
        loaders: [
            require.resolve('style-loader'),
            {
                loader: require.resolve('css-loader'),
                options: {
                    localIdentName: '[path][name]__[local]--[hash:base64:5]',
                    modules: true,
                },
            },
            {
                loader: require.resolve('sass-loader'),
                /**
                 * To prevent including the theme in every file we use the prependData attribute to load the theme
                 */
                options: {
                    prependData: '@import "./src/theme.scss";',
                },
            },
        ],
    });

For more info see:
https://magento.github.io/pwa-studio/technologies/basic-concepts/css-modules/

Once you getting it working, it would be great if you could share it in a PR.

Thanks :)

[markopredovic]

Thanks @rossmc , will do

[markopredovic]

I ended with this configuration for now, it is not quite generic but ok, scss files with 'module' in name are scoped to component, also have global available scss styles in src root directory.

clientConfig.module.rules.push(
        {
            test: /\.module\.s(a|c)ss$/,
            loaders: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader'),
                    options: {
                        localIdentName:
                            '[path][name]__[local]--[hash:base64:5]',
                        modules: true
                    }
                },
                {
                    loader: require.resolve('sass-loader')
                    /**
                     * To prevent including the theme in every file we use the prependData attribute to load the theme
                     */
                }
            ]
        },
        {
            test: /s(a|c)ss$/,
            exclude: /\.module.(s(a|c)ss)$/,
            loaders: [
                require.resolve('style-loader'),
                {
                    loader: require.resolve('css-loader')
                },
                {
                    loader: require.resolve('sass-loader'),
                    /**
                     * To prevent including the theme in every file we use the prependData attribute to load the theme
                     */
                    options: {
                        prependData: '@import "./src/styles/styles.scss";'
                    }
                }
            ]
        }
    );

[rossmc]

oh this is great. Thanks @markopredovic.

At some point soon, I hope use this to update the css-modules doc with an Optionally Use SCSS section.