PostCss 不导入变量文件

Question

我已经安装了postcss-import 和postcss-simple-vars。我想将所有颜色选择保存在一个文件中，然后在需要时只使用 $orange 而不是十六进制代码。暂时无法使用。

如果我在我的主 css 文件顶部包含变量名+十六进制代码 ($orange: #ffa500")，则该值将被很好地转换 (.button{color: $orange;}。但如果我将变量保存在单独的文件中，则找不到它（运行 gulp watch 时，我的命令行中出现“未定义变量”错误）。

目前，我的文件结构如下：

app/assets/styles/modules/_variables.css（带有 $orange: #ffa500"）， app/assets/styles/modules/_global.css（带有所有全局设置，例如 边框）app/assets/styles/styles.css（这个文件包含所有 @import 语句：@import "normalize.css", @import "modules/_global", @import "modules/_variables")。

Normalize.css 和 _global.css 被导入（并编译成 app/temp/styles）就好了。但不是_variables.css 文件！有人可以解释发生了什么吗？

这是我的 gulp 设置：

var gulp = require('gulp'),
watch = require('gulp-watch'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
simplevars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');

gulp.task('styles', function() {
    return gulp.src('./app/assets/styles/styles.css')
        .pipe(postcss([cssImport, simplevars, nested, autoprefixer]))
        .pipe(gulp.dest('./app/temp/styles'));
});

谢谢。

Answer 1

来自 postcss-simple-vars GitHub's project 的上一个已关闭问题，由 PostCSS 作者和此插件的维护者：

在 PostCSS 中的逻辑是不同的。
您将 _variables.pcss 导入到 styles.pcss。
不是全局状态。

（我用你的文件命名替换了 a 和 c）
因此，您需要将变量导入（每个/全部）您的其他“部分”（并确保它不会无数次将 CSS 规则输出到您的 CSS。或者如果您的缩小器会处理这种情况)