PostCss不导入变量文件

我已经安装postcss-import和postcss-simple-vars。我想将所有颜色选择保存在一个文件中，然后只需要使用$ orange而不是十六进制代码。目前它不工作。PostCss不导入变量文件

如果我在我的主css文件的顶部包含变量名+十六进制代码（$orange: #ffa500"），该值会被转换得很好（.button{color: $orange;}。但是，如果我将变量保存在单独的文件中，它不会找到它。一旦运行一饮而尽手表）得到我的命令行“未定义变量”错误

此刻，我的文件结构如下：

应用程序/资产/风格/模块/ _variables.css（与$ orange：＃ffa500“）， app/assets/styles/modules/_global.css（包含所有全局设置，例如 border-box ）app/assets/styles/styles.css（该文件包含所有 @import语句：@import“normalize.css”，@import “modules/_global”，@import“modules/_variables”）。

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

这是我大口设置：

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')); 
});

谢谢。

来源

2016-11-07 Newbie

从上次关闭的问题上postcss-simple-vars GitHub's project，通过这个插件的PostCSS作者和维护者：

在PostCSS逻辑是不同的。
将_variables.pcss导入styles.pcss。
不是全球状态。

所以你需要导入（每个/全部）的其他“谐音”你的变量（并确保它不会（从你的文件的命名代替a和c）输出CSS规则到你的CSS无数次，或者如果是你的缩小器处理的话）

来源

2016-11-07 13:52:56 FelipeAls

谢谢。我试图避免在所有其他部分中导入我的变量，尽管它总是一个选项。我一直在玩它，并意识到我必须重新排列我的文件（app/assets/styles/styles.css）与所有partials。只要我把@import（“modules/_variables”）放在依赖于_variables的任何其他文件之前，它就可以工作。这样愚蠢的错误。 – Newbie

这不会是意想不到的，因为Sass首先做到了:)相关：LESS有一个很好的选择：['@import（reference）']（http://lesscss.org/features/#import-options），kind “FYI” – FelipeAls

PostCss不导入变量文件

回答

相关问题