10

我有一个项目，其中包含一组 css 文件（每个反应组件一个）。我在 webpack 和 postcss-cssnext 中使用 css-loader（带有模块）。

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

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

然后我将其导入，以便通过 css 加载程序。问题是，其他文件不接受这些变量，所以要么这不起作用，要么我做错了什么（包括在组件 css 文件中直接起作用）。

一个有效的方法是拥有一个styles.json具有以下 webpack 设置的文件：

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

主要问题是每次更改变量时都必须重新启动 webpack 开发服务器（因此重新加载 webpack 配置）。这并不理想。

那么，有什么更好的方法来做到这一点吗？

4

2 回答 2

6

使用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);
}
于 2016-06-28T23:51:34.883 回答
2

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

我发现的简单解决方案是在 postcss-cssnext 之前使用 postcss-import 插件。设置完成后，您需要
@import 'variables.css';
在 .css 文件中访问这些变量。

于 2016-02-03T10:38:12.440 回答