@zerows/web-zone/config/webpack.config.style.js

Zero UI ( Zone )

const fs = require('fs');
const path = require('path');
const paths = require('./webpack.paths');
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

// Check if Tailwind config exists
const useTailwind = fs.existsSync(
    path.join(paths.appPath, 'tailwind.config.js')
);
// ---------------------------------

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (webpackEnv, cssOptions, preProcessor) => {
    const loaders = [
        {
            loader: MiniCssExtractPlugin.loader,
        },
        {
            loader: require.resolve('css-loader'),
            options: {
                ...cssOptions,
                // importLoaders: 0
            },
        },
        {
            // Options for PostCSS as we reference these options twice
            // Adds vendor prefixing based on your specified browser support in
            // package.json
            loader: require.resolve('postcss-loader'),
            options: {
                postcssOptions: {
                    // Necessary for external CSS imports to work
                    // https://github.com/facebook/create-react-app/issues/2677
                    ident: 'postcss',
                    config: false,
                    plugins: !useTailwind
                        ? [
                            'postcss-flexbugs-fixes',
                            [
                                'postcss-preset-env',
                                {
                                    autoprefixer: {
                                        flexbox: 'no-2009',
                                    },
                                    stage: 3,
                                },
                            ],
                            // Adds PostCSS Normalize as the reset css with default options,
                            // so that it honors browserslist config in package.json
                            // which in turn let's users customize the target behavior as per their needs.
                            'postcss-normalize',
                        ]
                        : [
                            'tailwindcss',
                            'postcss-flexbugs-fixes',
                            [
                                'postcss-preset-env',
                                {
                                    autoprefixer: {
                                        flexbox: 'no-2009',
                                    },
                                    stage: 3,
                                },
                            ],
                        ],
                },
                sourceMap: true,
            },
        },
    ].filter(Boolean);
    if (preProcessor) {
        // -------------------------------
        const preOptions = {
            sourceMap: true,
        }
        if ("sass-loader" === preProcessor) {
            /*
             *  Link: https://webpack.docschina.org/loaders/sass-loader/
             *  - implementation: sass ( Dart Sass )
             *  - sassOptions
             *  - sourceMap: compiler.devtool
             *  - additionalData
             *  - webpackImporter: true
             *  - warnRuleAsWarning: false
             */
            preOptions.sassOptions = {
                ...cssOptions
            };
            /*
             * $uni_font    - 默认字体大小
             * $uni_color   - 默认关键色
             * $uni_radius  - 默认圆角尺寸（2 / 4 / 6 / 8）
             * $uni_shadow  - 默认是否开启阴影（true / false）
             */
            const font = process.env.Z_CSS_FONT ? process.env.Z_CSS_FONT : 14;
            const radius = process.env.Z_CSS_RADIUS ? process.env.Z_CSS_RADIUS : 4;
            const shadow = process.env.Z_CSS_SHADOW ? process.env.Z_CSS_SHADOW : false;
            preOptions.additionalData = `
                    $uni_font: ${font}px;
                    $uni_color: ${process.env.Z_CSS_COLOR};
                    $uni_radius: ${radius}px;
                    $uni_shadow: ${shadow};
                `
        }
        // -------------------------------
        loaders.push(
            {
                loader: require.resolve('resolve-url-loader'),
                options: {
                    sourceMap: true,
                    root: paths.appSrc,
                },
            },
            {
                loader: require.resolve(preProcessor),
                options: preOptions,
            }
        );
    }
    return loaders;
};