Sass and global imports

Hi,

I’d like to automatically add imports at the top of scss files just like webpack.

So instead of adding: @import "src/global-styling/variables.scss"; At the top of every scss file, I’d like it if it could be added automatically.

I basically need the functionality of the following PR from this library: https://github.com/hytromo/rollup-plugin-postcss-retain-sass-data#readme

The problem is that that PR doesn’t work anymore and crashes. Could anyone tell me how I could achieve this? Perhaps there is another plugin that can help me?

[tirrth]

Hi,

I was a bit hasty celebrating the solution sadly, sorry. You did push me in the correct direction however, as I now understand how to add custom plugins to the postcss plugin.

I’m using rollup together with the rollup-plugin-postcss. I’ve added the code you added to rollup and the code does seem to be called.

    postcss({
      modules: true,
      extract: "dist/styles.css",
      use: ["sass"],
      plugins: [
        () => {
          return root => {
            root.prepend(
              postcss.atrule({
                name: "import",
                params: '"src/global-styling/variables.scss"'
              })
            );
          };
        }
      ]
    }),

However, when I remove the following line from my scss file it still fails and tells me i’m missing the import during bundling. @import "src/global-styling/variables.scss";

I realize this might be a bit outside of the scope of this github project as it involves rollup etc. Is there any documentation I can find on creating my own custom plugins for postcss. I’m assuming that the plugins should work the same in the rollup-plugin-postcss package.

postcss({
      modules: true,
      extract: true,
      use: [['sass', { data: '@import "src/styles/tailwind.scss";' }]],
      plugins: [autoprefixer()],
      minimize: process.env.NODE_ENV === "production",
      extensions: ['.css']
})

This works for me…

[ai]

Got it. You can add postcss-loader with custom PostCSS plugin before sass-loader.

This custom plugin will be like:

module.exports = postcss.plugin('postcss-auto-importer', () => {
  return root => {
    root.prepend(postcss.atrule({ name: 'import', params: '"src/global-styling/variables.scss"' }))
  }
})

Unfortunately, in Parcel you should use 2.0 alpha, since 1.0 doesn’t have this flexibility.

Did I answer your question?