Razzle: وحدات CSS مع ملفات SCSS

dizzyn أعتقد أن المكون الإضافي

لقد رفعت هذا من مكان آخر ، لكنه يعمل معي. بشكل أساسي ، تقوم بنسخ تكوين محمل CSS الحالي وتطبيقه مقابل امتدادات .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 في wich css scss و * .module.scss و * .module.css يدعمان في التكوين الافتراضي