How to compile sass loop ?

[webmasterpf]

Hello,

I've this kind of loop for my sass files (scss) and webpack encore doesn't compile them.

$typedecontenu: type-page-bts, type-TDC;
$zones: zone-1, zone-2, zone-3;
@each $zone in $zones {
  @each $type in $typedecontenu {
    ##{$zone}.#{$type} {

    & p,& ul,& li{
        @apply text-base p-1 list-inside;
    }
    & h2{
        @apply text-xl text-orange-fonce;
    }
    & h3{
        @apply text-lg text-orange-fonce;
    }
    & a{
        @apply no-underline text-orange-fonce hover:underline;
            }
  }/*  //Fin ##{$zone}.#{$type} */
} /*  // Fin @each $type */
} /* // Fin @each $zone */

the result is:

$typedecontenu: type-page-bts, type-TDC;
$zones: zone-1, zone-2, zone-3;
@each $zone in $zones {
  @each $type in $typedecontenu {

    ##{$zone}.#{$type} p,##{$zone}.#{$type} ul,##{$zone}.#{$type} li {
      list-style-position: inside;
      padding: 0.25rem;
      font-size: 1rem;
      line-height: 1.5rem;
    }
    ##{$zone}.#{$type} h2 {
      font-size: 1.25rem;
...

I'm using post-css, tailwind and plugins likethis: postcss config files

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

webpack config file:

 // enables Sass/SCSS support
    .enableSassLoader()

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

What can I do more to get it compiled as the other scss code ?
Thanks

[weaverryan]

I'm not sure. With .enableSassLoader(), all files ending in .scss are sent through the sass-loader. I don't think that the final CSS from sass-loader is sent through postcss, however. Usually, you're using Sass or postcss.

Anyway, this is all the info I have - I hope it helps - but I'm not sure what the problem is.

[webmasterpf]

At my starts with tailwind and webpack, I had this advice: https://discord.com/channels/486935104384532500/1101153891619459094/1102906464907046922

But I don't know how to do this kind of thing with webpack. Have any tips about it ?

[weaverryan]

It doesn't look like I have access to that Discord or the message is missing. But sorry, I'm not sure I have any more info.

[webmasterpf]

Copy of th emessage: In your build pipeline, run sass and output to a temporary file, then run tailwind on that temporary file to generate your final CSS file (most likely through postcss)

[stof]

Can you provide a reproducer ? It might be easier to debug this.

[webmasterpf]

Hi. What is it ? My files are here: https://gitlab.com/themes-d9/starter-d9-2022.git branch: tailwindcss3-dev

[stof]

you are importing a .css file, not a .scss file. So the SassLoader does not gets applied. You are only processing things with postcss.

[webmasterpf]

you are talking about the css/src/tailwind.css file ? As it's related to tailwind, I don't know if I can to change it to scss file.

[stof]

but you cannot import your Sass files from your CSS file if you want them to be processed by the Sass loader. You need an import managed by webpack for than, not an import managed by postcss-import

[webmasterpf]

So nobody use tailwind + sass + webpack encore ? :/ The only info source I found is: https://www.yourigalescot.com/fr/blog/comment-integrer-tailwindcss-v3-a-un-projet-symfony-avec-webpack-encore

[stof]

Well, if you want to use Sass + tailwind, you have to make your entrypoint a Sass file, as you need to compile Sass before running postcss (Sass files gets processed by the stack of loaders configured for CSS files after the sass-loader itself, so postcss will run on them).

[webmasterpf]

Agree. But technically, does exist example or explanation about what to do this ? I never use webpack encore or tailwind before 3 month ago... :D

[stof]

don't import a SCSS file from a CSS file. That's the rule. If you want to use Sass, you need to make your main entrypoint a Sass file.

[webmasterpf]

ok, so I need to rewrite my scss files, then I will look if sccs and tailwind are compiled right or not, as this test say :

 error  in ./css/src/tailwind.scss                                                                                                             

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
  ╷
2 │ & ul.liste-partenaires-ul {
  │ ^
  ╵
  style/scss/src/content-type/_frontpage.scss 2:1  @import
  css/src/tailwind.scss 8:9                        root stylesheet

[webmasterpf]

First test with this loop:

$typedecontenu: type-page-lycee, type-annonce-accueil, type-contenu-info-admin, type-page-erreur ;
$zones: zone-1, zone-2, zone-3, zone-4 ;
@each $zone in $zones {
  @each $type in $typedecontenu {
    ##{$zone}.#{$type} { 
    h1 {
      @apply bg-gris-clair border-dashed border-violet border-2 text-orange-fonce;
    }

    .entrefilet {
      @apply text-violet block capitalize font-bold;
      @apply lg:p-2 lg:translate-x-1 lg:m-[0.1] lg:min-w-0 lg:max-w-2xl;
    }
}}}

and compiled css give:

#zone-1.type-page-lycee #zone-1.type-page-erreur .entrefilet{
  display: block;
  font-weight: 700;
  text-transform: capitalize;
  --tw-text-opacity: 1;
  color: rgb(145 19 129 / var(--tw-text-opacity));
}
@media (min-width: 1024px){
  #zone-1.type-page-lycee #zone-1.type-page-erreur .entrefilet{
    margin: 0.1;
    min-width: 0px;
    max-width: 42rem;
    --tw-translate-x: 0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var$
    padding: 0.5rem;
  }
}

the final class isn't added to the first option. Syntax error or settings error ? it has worked well when I done it with gulp.