我可以有一个单一的变量文件使用cssnext和webpack吗？

Question

我有一个项目，其中有一组css文件(每个react组件一个)。我在使用css-loader (带有模块)在webpack和postcss-cssnext中。

理想情况下，我想要一个单独的variables.css，这样我就可以在css文件之间共享变量。我尝试过让variables.css包含如下内容：

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  ...
}

然后我导入它，这样它就会通过css加载器。问题是，其他文件不会接收到这些变量，所以要么这不起作用，要么我做错了什么(将它直接包含在组件css文件中就可以了)。

可以工作的一件事是有一个包含以下webpack设置的styles.json文件：

postcss: function (webpack) {
    return [
        ...
        require("postcss-cssnext")({
          features: {
            customProperties: {
              variables: require('./src/styles.json')
            }
          }
        })
        ...
    ]
}

然而，这样做的主要问题是每次我更改一个变量时，我都必须重新启动webpack开发服务器(因此重新加载webpack配置)。这并不理想。

那么，有没有更好的方法呢？

Answer 1

使用postcss-import是可行的。下面是一个使用CSS模块的示例配置：

{ 
  test: /\.css$/,
  loader: ExtractTextPlugin.extract(
    "style",
    "css?modules&localIdentName=[name]--[local]&sourceMap&importLoaders=1!postcss"
  )
}

在你的postcss设置中：

postcss: [
  require("postcss-import")({
    path: baseDir,
    addDependencyTo: webpack
  }), 
  require("postcss-cssnext")
]

path设置告诉postcss-import通过查找此处指定的目录来解析路径。

最后，在CSS模块文件中，指定Button.css

@import "styles/constants/constants.css";

.normal {
  font-size: 24px;
  color: var(--figmaBlue);
}

Answer 2

在cssnext-loader中，变量(至少目前)不会在导入的css文件之间共享，即使您将它们放在:root {}中也是如此。

我找到的最简单的解决方案是在postcss-cssnext之前使用postcss-import插件。设置完成后，您需要

@import 'variables.css';

在您想要访问这些变量的.css文件中。