You tried to parse scss with the standard css parser; try again with the postcss-scss parser

When attempting to parse SCSS (Sassy CSS) with the standard CSS parser, you might encounter errors or unexpected behavior. This is because SCSS introduces additional features and syntax that are not supported by the standard parser. To successfully parse SCSS, you should use the postcss-scss parser instead.

The postcss-scss parser is specifically designed to handle SCSS syntax and features. It can efficiently handle mixins, variables, nesting, and other SCSS-specific constructs. By using the postcss-scss parser, you can avoid errors and ensure correct parsing of your SCSS files.

Example:

    const postcss = require('postcss');
    const scssSyntax = require('postcss-scss');

    const scssCode = `
      $primary-color: #ff0000;
      .content {
        color: $primary-color;
      }
    `;

    postcss()
      .process(scssCode, { syntax: scssSyntax })
      .then((result) => {
        console.log(result.css);
      });
  

In the above example, we have a simple SCSS code snippet that defines a variable ($primary-color) and uses it within a CSS rule. To parse this SCSS code, we use postcss-scss parser as the syntax option in the postcss().process() function. The result.css contains the CSS output after successful parsing of the SCSS code.