Import SCSS into PostCSS through Webpack

user_8591003 0
Viewed 1991

I'm currently working on a project where I've got to import a particular scss file into one of the css files so that I can use some of the variables in it. This project uses PostCSS with a loader in webpack.

So far I've tried using an SCSS parser, but that doesn't seem to work.

The code sample below shows what I want to do to the main colors.css file:

@import "@theme-data/build/scss/variables/_darkBlueTheme.scss";

:global .lightGray {
  --textColor: $colorScheme-textColor;
  --graph-axis-label-color: rgba(104, 69, 69, 0.65);
  --tooltip-textColor: #f5f5f5;
  --tooltip-backgroundColor: #535353;
  --backgroundColor: #d9d9d9;
}

Does anyone know how I can configure webpack to handle this?

Thanks a lot!

postcss webpack sass
1 Answers

You will need 2 plugins to handle this:

npm i -D postcss-easy-import precss

Then update postcss.config.js

module.exports = {
    plugins: [
        require('postcss-easy-import')({
            path: ["src/css"] //or wherever it should look for relative paths
        }),
        require('precss'),
        //.. rest of your plugins
    ]
}

PreCss allows for scss syntax and PostCss Easy Import allows your import statements to work. The import plugin should come first in the list.

Documentation:

PostCss Easy Import - https://github.com/trysound/postcss-easy-import (for options look at postcss import which it uses under hood - https://github.com/postcss/postcss-import)

PreCss - https://github.com/jonathantneal/precss

This will make css files act like scss files so you can just change the extensions from scss to css and you should be fine.

Otherwise you can write a separate rule in webpack for the scss to generate a css file with scss loader and then import that css file into your entry point.

user_6574770
Related