由于未定义变量的 postcss 规则，编译 scss 文件的 NodeJs 脚本失败 [英] NodeJs Script that compiles scss files fails because of postcss rule for undefined variables

问题描述

我正在使用 scss-bundle 来导入 scss 文件并解析他所有的 @import 语句，以便稍后再次将其保存为 scss 文件.

I am using scss-bundle to import an scss file and resolve all his @import statements to later save it again as scss file.

这很好用，下面是一个例子来看看它是如何工作的:

This works fine and below is an example to see how it works:

scss-bundle.ts

import { Bundler } from 'scss-bundle';
import { relative } from 'path';
import { writeFile } from 'fs-extra';

/** Bundles all SCSS files into a single file */
async function bundleScss(input, output) {
  const {found, bundledContent, imports} = await new Bundler()
    .Bundle(input, ['./src/styles/**/*.scss']);
  if (imports) {
    const cwd = process.cwd();

    const filesNotFound = imports
      .filter((x) => !x.found)
      .map((x) => relative(cwd, x.filePath));

    if (filesNotFound.length) {
      console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`);
      throw new Error('One or more SCSS imports failed');
    }
  }

  if (found) {
    await writeFile(output, bundledContent);
  }
}

bundleScss('./src/styles/file-to-import.scss', './src/styles/imported-file.scss');

其中 file-to-import.scss 是以下文件:

@import './file-to-import-1';
@import './file-to-import-2';

和 file-to-import-1.scss 和 file-to-import-2.scss 是以下文件:

And file-to-import-1.scss and file-to-import-2.scss are the following files:

file-to-import-1.scss

.price-range {
  background-color: $range-header-background-1;
}

file-to-import-2.scss

.qr-code {
  background-color: $range-header-background-2;
}

执行脚本的结果是:

imported-file.scss:

.price-range {
  background-color: $range-header-background-1;
}

.qr-code {
  background-color: $range-header-background-2;
}

在此之前，一切正常.

现在 ... 我想使用 postcss-css-modules 为了散列类的名称，结果应该是这样的:

Now ... I want to use postcss-css-modules in order to hash the names of the classes, the result should be something like this:

imported-file.scss 散列后

._3BQkZ {
  background-color: $range-header-background-1;
}

.Xb2EV {
  background-color: $range-header-background-2;
}

我已经实现了这一点，但前提是我定义了变量 $range-header-background-1 和 $range-header-background-2.

I have already achieved that but only if I define the variables $range-header-background-1 and $range-header-background-2.

但是，我还不能定义变量，因为我需要在运行时将它们定义为 Http 请求的查询参数.

如果我在没有定义变量的情况下运行脚本，则会显示以下错误:

If I run the script without defining the variables the following error is display:

(node:1972) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): CssSyntaxError: <css input>:372:14: Unknown word
(node:1972) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

这是带有 postcss-css-modules 调用的 scss-budle.ts:

Here is the scss-budle.ts with postcss-css-modules call:

import { Bundler } from 'scss-bundle';
import { relative } from 'path';
import * as path from 'path';
import { writeFile } from 'fs-extra';
import * as postcssModules from 'postcss-modules';
import * as postcss from 'postcss';
import * as fs from 'fs';

/** Bundles all SCSS files into a single file */
async function bundleScss(input, output) {
  const {found, bundledContent, imports} = await new Bundler()
    .Bundle(input, ['./src/styles/**/*.scss']);
  if (imports) {
    const cwd = process.cwd();

    const filesNotFound = imports
      .filter((x) => !x.found)
      .map((x) => relative(cwd, x.filePath));

    if (filesNotFound.length) {
      console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`);
      throw new Error('One or more SCSS imports failed');
    }
  }

  if (found) {
    await writeFile(output, bundledContent);

    const hashedResult = await postcss().use(postcssModules({
      generateScopedName: '[hash:base64:5]',
      getJSON(cssFileName: any, json: any, outputFileName: any) {
        let jsonFileName = path.resolve('./src/styles/imported-file.json');
        fs.writeFileSync(jsonFileName, JSON.stringify(json));
      }
    })).process(bundledContent);
    await writeFile(output.replace('.scss', '-hashed.scss'), hashedResult.css, 'utf8');
    return;
  }

}

bundleScss('./src/styles/file-to-import.scss', './src/styles/imported-file.scss');

有谁知道如何继续执行 postcss-css-modules 而不会因为未定义 scss 变量而停止?

Does anybody know how to continue executing postcss-css-modules without stopping because the scss variables are not defined?

提前致谢.

推荐答案

我能够使用 postcss-scss 作为 postcss 的解析器:

I was able to run the script successfully using postcss-scss as parser of postcss:

import * as postcssScss from 'postcss-scss';

...

const hashedResult = await postcss([
  postcssModules({
    generateScopedName: '[hash:base64:8]',
    getJSON(cssFileName: any, json: any, outputFileName: any) {
        let jsonFileName = path.resolve('./src/styles/imported-file.json');
        fs.writeFileSync(jsonFileName, JSON.stringify(json));
    }
  })
]).process(bundledContent, { parser: postcssScss});

下面，我留下了完整的脚本:

Below, I leave the script complete:

scss-bundle.ts

import { Bundler } from 'scss-bundle';
import { relative } from 'path';
import * as path from 'path';
import { writeFile } from 'fs-extra';
import * as postcssModules from 'postcss-modules';
import * as postcss from 'postcss';
import * as fs from 'fs';
import * as postcssScss from 'postcss-scss';

/** Bundles all SCSS files into a single file */
async function bundleScss(input, output) {
  const {found, bundledContent, imports} = await new Bundler()
    .Bundle(input, ['./src/styles/**/*.scss']);
  if (imports) {
    const cwd = process.cwd();

    const filesNotFound = imports
      .filter((x) => !x.found)
      .map((x) => relative(cwd, x.filePath));

    if (filesNotFound.length) {
      console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`);
      throw new Error('One or more SCSS imports failed');
    }
  }

  if (found) {
    await writeFile(output, bundledContent);

    const hashedResult = await postcss([
      postcssModules({
        generateScopedName: '[hash:base64:8]',
        getJSON(cssFileName: any, json: any, outputFileName: any) {
            let jsonFileName = path.resolve('./src/styles/imported-file.json');
            fs.writeFileSync(jsonFileName, JSON.stringify(json));
        }
      })
    ]).process(bundledContent, { parser: postcssScss});
    await writeFile(output.replace('.scss', '-hashed.scss'), hashedResult.css, 'utf8');
    return;
  }
}

bundleScss('./src/styles/file-to-import.scss', './src/styles/imported-file.scss');

这篇关于由于未定义变量的 postcss 规则，编译 scss 文件的 NodeJs 脚本失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！