Question

我已安装postcss-import和postcss-simple-vars。我想将所有颜色选择保存在一个文件中，然后只要我需要使用$ orange而不是hexcode。目前它还没有工作。

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

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

app / assets / styles / modules / _variables.css（使用$ orange：＃ffa500＆＃34;）， app / assets / styles / modules / _global.css（包含所有全局设置，例如 border-box）app / assets / styles / styles.css（此文件包含所有内容） @import语句：@import＆＃34; normalize.css＆＃34;，@ import ＆＃34; modules / _global＆＃34;，@ import＆＃34; modules / _variables＆＃34;）。

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）
因此，您需要在（其中每一个/全部）您的其他＆＃34;部分＆＃34;中导入您的变量。（并确保它不会无数次地向你的CSS输出CSS规则。或者如果你的minifier负责那样）

PostCss不会导入变量文件

1 个答案: