Question

我有一个项目有一组css文件（每个反应组件一个）。我正在使用webpack中的css-loader（带模块）以及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文件里面。

我可以使用带有webpack的cssnext来获得单个变量文件吗？

2 个答案: