gaoxiaoliangz/react-scoped-css

能不能出一个详细的如何在create-react-app创建的框架中配置该插件的教程,或者阿里的umi如何使用该插件

Opened this issue · 1 comments

能不能出一个详细的如何在create-react-app创建的框架中配置该插件的教程,或者阿里的umi如何使用该插件

umi@2.13.17

// chainWebpack 扩展配置
// 路径 config\plugin.config.js
config.module
    .rule('less')
    .use('scoped-css-loader')
    .loader('scoped-css-loader')
    .after('css-loader')
    .end();

config.module
    .rule('less-in-node_modules')
    .use('scoped-css-loader')
    .loader('scoped-css-loader')
    .after('css-loader')
    .end();
// 路径 config\config.js

// 增加属性
extraBabelPlugins: [
    [
        'babel-plugin-react-scoped-css',
        {
            // exclude: [path.resolve(__dirname, '.', '/src/assets/style/common.less')],
            // 包含 common.less 都会被过滤
            // include: '^((?!common.less).)*.(sa|sc|le|c)ss$',
            // 只对带有 scoped 名称的起作用
            include: '.scoped.(sa|sc|le|c)ss$',
        },
    ],
],

// 最重要一步
// cssLoaderOptions 这个s属性里面要把 .scoped.less 文件过滤掉