在所有 css 文件中重复使用变量 - 使用 postcss-cssnext,特别是 postcss-custom-properties with css-模块
Reuse variables in all css files - using postcss-cssnext and specifically postcss-custom-properties with css-modules
我正在使用 css-modules 和 postcss-cssnext ,特别是它的 postcss-custom -属性特征
我也在使用 react-boilerplate (https://github.com/mxstbr/react-boilerplate/),这个非常好的样板包含其中使用的这些模块
我的文件夹结构是:
Main folder
app
containers
App
styles.css
index.js
HomePage
styles.css
index.js
components
Component1
styles.css
index.js
Component2
styles.css
index.js
App/styles.css
:root {
--varA: #1eb3ab;
--varB: #1eb3ab;
--varC: #1eb3ab;
--varD: #1eb3ab;
--varE: #1eb3ab;
}
body {
color: var(--varA) /*works fine */
}
我想在 App/styles.css 中使用这些变量(或者我很乐意在其他地方定义它们,在这种情况下我该怎么做)在其他容器中的组件
我试过了(用于 css-模块)
HomePage/index.js
..
..
<div className={styles.myClass}> Content </div>
..
HomePage/styles.css -- 方法 1
:root{
--varA: tealish from "containers/App/styles.css"; /* DOESNT WORK */
}
.myClass {
color: var(--varA)
}
HomePage/styles.css -- 方法 2
.myClass {
color: var(--varA from "containers/App/styles.css") /* DOESNT WORK AS WELL*/
}
最优雅的解决方案是什么?我想将所有变量放在一个 file/one 位置,并在所有 css 文件中很好地使用它们
我还在 postcss-custom-properties https://github.com/postcss/postcss-custom-properties#variables 中看到了 variables
。但是我不确定如何在使用 postcss-cssnext
的 webpack 定义中使用
webpack.dev.babe.js - 如何在此处放置 VARIABLES 选项
// Process the CSS with PostCSS
postcssPlugins: [
postcssFocus(), // Add a :focus to every :hover
cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
browsers: ['last 5 versions', 'IE > 8'], // ...based on this browser list
// I think I need to add some line here, but not sure what
}),
postcssReporter({ // Posts messages from plugins to the terminal
clearMessages: true,
}),
postcssAnimation(),
],
我会推荐 postcss-custom-properties "variables" 选项。
文档中有示例
http://cssnext.io/usage/#features
cssnext({
features: {
customProperties: {
variables: {
mainColor: "red",
altColor: "blue",
}
}
}
})
我通常在postcss-import的帮助下实现这个,所以每个需要消耗"variables"的模块都需要导入部分。
@import 'path/to/variables';
.myClass {
color: var(--colorGray);
}
该方法适用于自定义属性,但也适用于 custom property sets。
类似.
我正在使用 css-modules 和 postcss-cssnext ,特别是它的 postcss-custom -属性特征
我也在使用 react-boilerplate (https://github.com/mxstbr/react-boilerplate/),这个非常好的样板包含其中使用的这些模块
我的文件夹结构是:
Main folder
app
containers
App
styles.css
index.js
HomePage
styles.css
index.js
components
Component1
styles.css
index.js
Component2
styles.css
index.js
App/styles.css
:root {
--varA: #1eb3ab;
--varB: #1eb3ab;
--varC: #1eb3ab;
--varD: #1eb3ab;
--varE: #1eb3ab;
}
body {
color: var(--varA) /*works fine */
}
我想在 App/styles.css 中使用这些变量(或者我很乐意在其他地方定义它们,在这种情况下我该怎么做)在其他容器中的组件
我试过了(用于 css-模块)
HomePage/index.js
..
..
<div className={styles.myClass}> Content </div>
..
HomePage/styles.css -- 方法 1
:root{
--varA: tealish from "containers/App/styles.css"; /* DOESNT WORK */
}
.myClass {
color: var(--varA)
}
HomePage/styles.css -- 方法 2
.myClass {
color: var(--varA from "containers/App/styles.css") /* DOESNT WORK AS WELL*/
}
最优雅的解决方案是什么?我想将所有变量放在一个 file/one 位置,并在所有 css 文件中很好地使用它们
我还在 postcss-custom-properties https://github.com/postcss/postcss-custom-properties#variables 中看到了 variables
。但是我不确定如何在使用 postcss-cssnext
webpack.dev.babe.js - 如何在此处放置 VARIABLES 选项
// Process the CSS with PostCSS
postcssPlugins: [
postcssFocus(), // Add a :focus to every :hover
cssnext({ // Allow future CSS features to be used, also auto-prefixes the CSS...
browsers: ['last 5 versions', 'IE > 8'], // ...based on this browser list
// I think I need to add some line here, but not sure what
}),
postcssReporter({ // Posts messages from plugins to the terminal
clearMessages: true,
}),
postcssAnimation(),
],
我会推荐 postcss-custom-properties "variables" 选项。
文档中有示例
http://cssnext.io/usage/#features
cssnext({
features: {
customProperties: {
variables: {
mainColor: "red",
altColor: "blue",
}
}
}
})
我通常在postcss-import的帮助下实现这个,所以每个需要消耗"variables"的模块都需要导入部分。
@import 'path/to/variables';
.myClass {
color: var(--colorGray);
}
该方法适用于自定义属性,但也适用于 custom property sets。
类似