Which plugins to compile scss files wrote into sass with webpack encore ?

[webmasterpf]

Hello,

All is in the title and this is the result of reflexion about import files started here postcss/postcss-import#525
So this is my actual postcss config:

module.exports = {
  syntax: 'postcss-scss',
  plugins: {
    'postcss-import': {},// postcss-import needs to be first
    'tailwindcss/nesting': 'postcss-nesting',
    'postcss-cssnext' : {},
    tailwindcss: {},
    /* autoprefixer: {}, */   
  }
}

With this I compile scss files imported into this file:
css/src/tailwind.scss

/*Import des plugins de Tailwind de base*/
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Styles custom appliquant TW via les classes perso */ 
@import "../../style/scss/src/content-type/_page-lycee.scss";
@import "../../style/scss/src/content-type/_frontpage.scss";
@import "../../style/scss/src/content-type/_fiche-formation.scss";
@import "../../style/scss/src/content-type/_fiche-bts.scss";
@import "../../style/scss/src/content-type/_contenu-actu-presse-asso.scss";
@import "../../style/scss/src/content-type/_contenu-association.scss";
@import "../../style/scss/src/content-type/_contenu-international.scss";
@import "../../style/scss/src/content-type/_page-bts.scss";
@import "../../style/scss/src/content-type/_page-formations.scss";
@import "../../style/scss/src/content-type/_page-actualites.scss";
@import "../../style/scss/src/content-type/_contenu-entreprise.scss";

@import "../../style/scss/src/galerie/_galeries.scss";

@import "../../style/scss/src/ui/_search.scss";

/* @import "../../style/scss/src/global/_mixins-custom.scss"; */
@import "../../style/scss/src/global/_nav_superfish.scss"; 
@import "../../style/scss/src/global/_header.scss";

All files are here: https://gitlab.com/themes-d9/starter-d9-2022/-/tree/tailwindcss3-dev
Thanks for tips about plugins, because actually, mixin scss file isn't compiled and so, I can't use my sass mixin. Idem fo the sass loop.

[ai]

There is not any plugin to compile Sass.

You should add sass-loader before the PostCSS and compile @import with Sass.

Or migrate your syntax to some PostCSS syntax.

[webmasterpf]

webpack encore config is (partia):

// enables Sass/SCSS support
    .enableSassLoader()

    // enables PostCSS support
    .enablePostCssLoader((options) => {
      options.postcssOptions = {
          config: './postcss.config.js',
      }

So I don't understand why my mixin.scss file isn't compiled like others scss files.So for you, all is in place on the postcss side ?

[ai]

PostCSS @import is not processed by webpack (and Sass)

[webmasterpf]

I don't understand. Webpack compile scss files imported into tailwind.scss and use postcss config. So what do you mean about @import ? Have you an example ?

[ai]

Sorry, I can’t help you with configuring webpack. It is full time job.

[webmasterpf]

No worries. It was to be sure the issue is on the webpack side, so I notice all is ok on the postcss side as you mentionned. Thanks