<<深入React技术栈>> CSS Modules

css-loader

css-loader 是一个 webpack 模块编译器，支持 CSS Modules .

    module: {
        rules: [
            { test: /.global.css$/, use: [$style_loader, $css_loader] },
            { test: /(?<!.global).css$/, use: [$style_loader, {
                loader: $css_loader,
                options: {
                    modules: {
                        localIdentName: '[name]__[local]-[hash:base64:5]'
                    }
                }
            }]},
            { test: /.(html|png|jpg|ico)$/, use: $file_loader + '?context=src&name=[path][name].[ext]' },
            { test: /.tsx?$/, exclude: /node_modules/, use: $babel_loader }, // @BABEL_LOADER及其预设由rds提供
        ],
    },

编写全局 css

除了在 webpack 配置上下功夫，其实还可以使用 :global 标签

:global(.green) {
 color: green;
}

/* 也可以写成 */
:global .green {
 color: green;
}

/* 同时声明规则 */
:global .h1, :global .h2 {
    color: red;
}

/* 复杂选择器 */
:global
.h1::after + .h2 {
    color: red;
}

composes

/* components/Button.css */
.base { /* 所有通用的样式 */ }

.primary {
    composes: base;
    composes: primary-color from './settings.css';
    /* primary 其他样式 */
    font-size: 18px;
}

/* components/settings.css */
.primary-color {
    color: #f40;
}

css['primary'] 将会类似 _20eCVrzXe_rpkWoUNaftai U0nJLZhEKEnKyFhHa1W2F wPQF2XSEKwGSE9ea1BYHl。

实现 CSS 与 JavaScript 变量共享

:export 关键字可以把 CSS 中的变量输出到 JavaScript 中，例如：

/* config.scss */
$primary-color: #f40;
:export {
    primaryColor: $primary-color;
}

/* app.js */
import style from 'config.scss';
// 会输出 #F40
console.log(style.primaryColor);

see

https://github.com/css-modules/css-modules

END