Snowpack and postcss-import?

Question

I'm trying to use postcss-simple-vars with Snowpack.

REPL: https://github.com/frederikhors/snowpack-svelte-tailwindcss

I'm using https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/app-template-svelte-typescript

I'm trying to use it like this:

• postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-simple-vars'),
    require('tailwindcss'),
    require('autoprefixer'),
    ...(production ? [require('cssnano')] : [])
  ],
};

• index.js:

import "./index.css";

• index.css:

@tailwind base;
@tailwind components;

@import "./colors.css";

@tailwind utilities;

body {
  background-color: $my-custom-bgcolor;
}

• colors.css:

$my-custom-bgcolor: #ff0000;

but it can't find the vars, why?

Error: Command failed with exit code 1: postcss
CssSyntaxError: postcss-simple-vars: C:\project\stdin:28:3: Undefined variable $my-custom-bgcolor

Can you help me?

UPDATE:

I read all https://github.com/snowpackjs/snowpack/discussions/1693 and tried everything: I HAD NO LUCK!

I can't import nested .css with @import as:

@import "./colors.css";

nor as:

@import "colors.css";

As a consequence of this I am unable to use postcss-simple-vars.

Answer 1

Finally I found a solution, that worked for me:

1. remove the postcss-import plugin: The import is done by Snowpack.
2. everywhere use relative paths (./colors.css or ../../colors.css)
3. @import your variables file everywhere where variables are used
4. switch from postcss-simple-vars to postcss-custom-properties

I'm not sure if step 3 and step 4 are necessary, at least that worked for me. The code also looks cleaner with properties instead of simple vars.