SCSS interpolation error

[kKen94]

Hi everybody and thanks for your attention.

I cannot use @each statement. I got this compilation error:

`@apply` cannot be used with `.bg-\#\{\$color\}-100` because `.bg-\#\{\$color\}-100` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.bg-\#\{\$color\}-100` exists, make sure that an
y `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

This is my webpack postcss configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          syntax: 'postcss-scss',
          plugins: () => [
            require('postcss-import'),
            require('tailwindcss'),
            require('postcss-nested'),
            require('postcss-custom-properties'),
            require('autoprefixer'),
          ]
        }
      }
    ]
  }
};

and this is my style.scss:

$colors: ('gray', 'red', 'orange', 'yellow', 'green', 'teal', 'blue', 'indigo', 'purple', 'pink');

@each $color in $colors {
  .btn-#{$color} {
    @apply px-4;
    @apply py-2;
    @apply border !important;
    @apply border-gray-200;
    @apply rounded;
    @apply bg-transparent;
    @apply text-#{$color}-500;
    transition: 300ms;
  }
}

I (think) followed every single step and every suggestion to install tailwind with sass (SCSS) preprocessor since I use Angular. And the strange thing is that !important, despite documentation, works normally, but variables interpolation in @apply directive doesn't. Where I wrong?

PS: class name is created fine (.btn-green, .btn-gray, ecc...)

I follow examples in #614 without success

[tlgreg]

postcss-scss syntax doesn't actually run scss inside postcss, it only means that postcss accepts the scss syntax so scss can run after postcss. In your case, you probably want to run scss before postcss and keep using the default css syntax inside postcss.

[kKen94]

postcss-scss syntax doesn't actually run scss inside postcss, it only means that postcss accepts the scss syntax so scss can run after postcss. In your case, you probably want to run scss before postcss and keep using the default css syntax inside postcss.

So what (and how) I should edit it? 🤔

[tlgreg]

Use the sass-loader in front of the postcss-loader.

{
  test: /\.scss$/,
  use: [
    // ...
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: () => [
          // ...
        ],
      },
    },
    {
      loader: 'sass-loader',
      options: {
        // ...
      },
    },
  ],
}

[kKen94]

Seriously, I love you man <3 Maybe this thing should be insert into documentation, as a tip or a tiny suggestion under Sass example.

[avinashvalluru]

Seriously, I love you man <3 Maybe this thing should be insert into documentation, as a tip or a tiny suggestion under Sass example.

I am also facing the same issue can you please share you config. It will be great helpful for me. Thanks in Advance

[kKen94]

@avinashvalluru

• webpack.config.js

const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project
  content: [
    './src/**/*.{ts,js,html}',
  ],

  // This is the function used to extract class names from your templates
  defaultExtractor: content => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []

    return broadMatches.concat(innerMatches)
  }
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            ident: 'postcss',
            syntax: 'postcss-scss',
            plugins: [
              require('postcss-import'),
              require('tailwindcss'),
              require('postcss-nested'),
              require('postcss-custom-properties'),
              require('autoprefixer'),
              ...(process.env.NODE_ENV.trim() === "prod" || process.env.NODE_ENV.trim() === "staging") ? [purgecss] : [],
            ],
          },
        },
      },
      {
        test: /\.scss$/i,
        use: ['sass-loader'],
      },
    ],
  },
};

• tailwind.scss

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

(Settings for Angular)