Inject global scss files before processing styles

[manuschillerdev]

thanks for the great plugin!

Is it possible to inject several scss imports to every scss file before processing it? In our webpack project we use sass-resoucres-loader for that, so we do not need to manually import the helpers in every *.scss file:

{
    loader: 'sass-resources-loader?sourceMap',
    options: {
      resources: [
        resolve(rootDir, 'src/app/styles/utils/rem-to-px.scss'),
        // ...
      ],
    },
  },

src/app/styles/utils/rem-to-px.scss

@function rem($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

MyComponent.scss

// note: no explicit import of rem-to-px.scss here
.MyComponent {
  width: rem(24px);
}

is this possible with this or any other rollup plugin right now? Thanks again!

[pollys2217]

Hi! I use the following settings in my project:

rollup.config.js

styles({
         sass: {
            data: `
               @import "${path.join(__dirname, "src/styles/variables.scss")}";
            `,
         },
}),