Razzle: एससीएसएस फाइलों के साथ सीएसएस मॉड्यूल

@dizzyn मुझे लगता है कि ऊपर की

मैंने इसे कहीं और से उठाया, लेकिन मेरे लिए काम करता है। अनिवार्य रूप से आप मौजूदा सीएसएस लोडर कॉन्फ़िगरेशन की प्रतिलिपि बनाते हैं और इसे .module.scss एक्सटेंशन के लिए लागू करते हैं जैसे:

const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
const cssLoaderFinder = makeLoaderFinder('css-loader');
const paths = require('razzle/config/paths');

module.exports = {
  modify: (baseConfig, {dev}, webpack) => {
    const config = Object.assign({}, baseConfig);

    config.module.rules.filter(cssLoaderFinder).forEach(rule => {
        const isCssModuleRule = !rule.test.test('module.css');
        const scssExclude = [paths.appBuild];
        let scssTest = /\.s[ac]ss$/;
        if (isCssModuleRule) {
            scssTest = /\.module\.s[ac]ss$/;
        } else {
            scssExclude.push(/\.module\.s[ac]ss$/);
        }

        // Use default configs
        config.module.rules.push({
            test: scssTest,
            exclude: scssExclude,
            use: [
                ...rule.use,
                scssLoader,
            ]
        });
    });
  }
};

razzle.config.js . में
मैंने कॉन्फ़िगरेशन वेबपैक का विस्तार किया।

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const postcssNormalize = require('postcss-normalize');


const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
        {
            loader: MiniCssExtractPlugin.loader
        },
        {
            loader: require.resolve('css-loader'),
            options: cssOptions,
        },
        {
            loader: require.resolve('postcss-loader'),
            options: {
                ident: 'postcss',
                plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    require('postcss-preset-env')({
                        autoprefixer: {
                            flexbox: 'no-2009',
                        },
                        stage: 3,
                    }),
                    postcssNormalize(),
                ],
                sourceMap: false,
            },
        },
    ].filter(Boolean);
    if (preProcessor) {
        loaders.push({
            loader: require.resolve(preProcessor),
            options: {
                sourceMap: false,
            },
        });
    }
    return loaders;
};
module.exports = {
    modify: (config, { target, dev }, webpack) => {

        config.plugins.push(new MiniCssExtractPlugin({
            filename: 'static/css/bundle.[contenthash:8].css',
            chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
            allChunks: true,

        }))

        config.module.rules.push(
            {
                test: sassRegex,
                exclude: sassModuleRegex,
                use: getStyleLoaders(
                    {
                        importLoaders: 2,
                        sourceMap: false,
                    },
                    'sass-loader'
                ),
                sideEffects: true,
            },
            {
                test: sassModuleRegex,
                use: getStyleLoaders(
                    {
                        importLoaders: 2,
                        sourceMap: false,
                        modules: true,
                        getLocalIdent: getCSSModuleLocalIdent,
                    },
                    'sass-loader'
                ),
            }
        )
        return config;
    }
};

यह काम है

import './Home.css';
import s from './Home.module.css';
import './a.scss';
import a from './a.module.scss';

मैंने पुल अनुरोध बनाया https://github.com/jaredpalmer/razzle/pull/1047 जिसमें सीएसएस scss, *.module.scss, *.module.css डिफ़ॉल्ट कॉन्फ़िगरेशन में समर्थन करता है