CODEWITHSUNDEEP
javascriptcssvariablesgulppostcss
AffectionateOrange
AffectionateOrange

Reputation: 134

PostCss doesn't import variable file

I have installed postcss-import and postcss-simple-vars. I want to save all my color choices in a single file and then just use $orange instead of the hexcode whenever I need to. It is not working at the moment.

If I include the variable name+hexcode ($orange: #ffa500") on top of my main css file, the value gets converted just fine (.button{color: $orange;}. But if I save the variable in a separate file, it is not finding it (I get 'undefined variable' error in my command line upon running gulp watch).

At the moment, my file structure is following:

app/assets/styles/modules/_variables.css (with the $orange: #ffa500"), app/assets/styles/modules/_global.css (with all global settings, e.g. border-box) app/assets/styles/styles.css (this file has all the @import statements: @import "normalize.css", @import "modules/_global", @import "modules/_variables").

Normalize.css and _global.css gets imported (and compiled into app/temp/styles) just fine. But not the _variables.css file! Can someone explain what is going on?

This is my gulp setup:

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

Thank you.

Upvotes: 2

Views: 2129

Answers (1)

FelipeAls
FelipeAls

Reputation: 22171

From last closed issue on postcss-simple-vars GitHub's project, by PostCSS author and maintainer of this plugin:

In PostCSS logic is different.
You import _variables.pcss to styles.pcss.
Not to global state.

(I replaced a and c by the naming of your files)
So you'd need to import your variables in (each of / all) your other "partials" (and make sure it doesn't output CSS rules to your CSS countless times. Or if it's the case that your minifier takes care of that)

Upvotes: 1

Related Questions