在所有 css 文件中重用变量 - 使用 postcss-cssnext，特别是 postcss-custom-properties 和 css-modules答案

【问题标题】：Reuse variables in all css files - using postcss-cssnext and specifically postcss-custom-properties with css-modules在所有 css 文件中重用变量 - 使用 postcss-cssnext，特别是 postcss-custom-properties 和 css-modules
【发布时间】：2017-03-09 02:22:03
【问题描述】：

我正在使用 css-modules 和 postcss-cssnext ，特别是它的 postcss-custom-properties 功能

我也在使用 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

应用/styles.css

:root {
    --varA: #1eb3ab;
    --varB: #1eb3ab;
    --varC: #1eb3ab;
    --varD: #1eb3ab;
    --varE: #1eb3ab;

}

body {
    color: var(--varA)  /*works fine */
}

我想在 App/styles.css 中使用这些变量（或者我很乐意在其他地方定义它们，在这种情况下我该怎么做）在其他容器和组件中

我已经尝试过（用于 css-modules 中）

主页/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*/
}

什么是最优雅的解决方案？我想将所有变量放在一个文件/一个地方，并在所有 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(),
  ],

【问题讨论】：

标签： reactjs webpack postcss react-boilerplate cssnext

【解决方案1】：

我通常在postcss-import 的帮助下实现这一点，因此每个需要使用“变量”的模块都需要导入部分。

@import 'path/to/variables';

.myClass {
  color: var(--colorGray);
}

这种方法适用于自定义属性，但也适用于 custom property sets。

类似的question。

【讨论】：

【解决方案2】：

我会推荐 postcss-custom-properties “变量”选项。

您在文档中有一个示例

http://cssnext.io/usage/#features

cssnext({
  features: {
    customProperties: {
      variables: {
        mainColor: "red",
        altColor: "blue",
      }
    }
  }
})

【讨论】：

嗨，我打算用同样的。只是想知道如何在 CSS 文件中使用它们。提前致谢。