如何在 CSS-Modules 中使用全局变量?
How to use global variables in CSS-Modules?
我正忙于使用 CSS-Modules 学习 React,我不太明白如何存储变量?例如,在 Sass 中,您可以这样做:
// _variables.scss
$primary-color: #f1f1f1;
// heading.scss
@import './variables';
.heading {
color: $primary-color
}
如何在 CSS 模块中实现这一点?
一种方法是使用依赖项。例如,
// variables.css
.primaryColor {
color: #f1f1f1
}
// heading.css
.heading {
composes: primaryColor from "./variables.css"
}
在此处查看更多详细信息:https://github.com/css-modules/css-modules#dependencies
如果您使用的是 webpack,这里有更多示例:https://github.com/webpack/css-loader#composing-css-classes
此外,如果您使用的是 webpack,您仍然可以将 Sass 与 CSS 模块一起使用。
CSS-Modules 文档在此处提到了变量:
https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md
这样你就可以导入变量了:
@value colors: "../../main/colors.css";
@value primary, secondary, tertiary from colors;
可用于您的 css:
.main {
background-color: tertiary;
border-top: 30px solid primary;
}
要使这项工作正常进行,需要将 postcss-loader
和 postcss-modules-values
添加到您的 webpack 配置中。见下文:
{
test: /\.css$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
plugins: [postcssModulesValues]
}
}
]
}
您可以使用 sass 预处理器 和 sass-resources-loader.
sass-resources-loader 会将所有变量、混入等添加到每个必需的 sass 文件中。
看看这个
//vars.css
:root {
--color-black: #222;
}
//myComponent.module.css
@import './vars.css';
.component{
color: var(--color-black);
}
我正忙于使用 CSS-Modules 学习 React,我不太明白如何存储变量?例如,在 Sass 中,您可以这样做:
// _variables.scss
$primary-color: #f1f1f1;
// heading.scss
@import './variables';
.heading {
color: $primary-color
}
如何在 CSS 模块中实现这一点?
一种方法是使用依赖项。例如,
// variables.css
.primaryColor {
color: #f1f1f1
}
// heading.css
.heading {
composes: primaryColor from "./variables.css"
}
在此处查看更多详细信息:https://github.com/css-modules/css-modules#dependencies
如果您使用的是 webpack,这里有更多示例:https://github.com/webpack/css-loader#composing-css-classes
此外,如果您使用的是 webpack,您仍然可以将 Sass 与 CSS 模块一起使用。
CSS-Modules 文档在此处提到了变量: https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md
这样你就可以导入变量了:
@value colors: "../../main/colors.css";
@value primary, secondary, tertiary from colors;
可用于您的 css:
.main {
background-color: tertiary;
border-top: 30px solid primary;
}
要使这项工作正常进行,需要将 postcss-loader
和 postcss-modules-values
添加到您的 webpack 配置中。见下文:
{
test: /\.css$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
plugins: [postcssModulesValues]
}
}
]
}
您可以使用 sass 预处理器 和 sass-resources-loader.
sass-resources-loader 会将所有变量、混入等添加到每个必需的 sass 文件中。
看看这个
//vars.css
:root {
--color-black: #222;
}
//myComponent.module.css
@import './vars.css';
.component{
color: var(--color-black);
}