Angular：如何将 JSON 变量解析为 SCSS

Question

在 Angular 应用程序中，我通过普通D3或Vega进行 D3 视觉效果。还有 SCSS 样式。

我希望能够从 Javascript 和 SCSS 中引用相同的全局变量以进行样式设置。JSON 文件可以很好地存储我通过简单import语句加载到 Typescript 中的设置。但是如何从 SCSS 做同样的事情呢？

node-sass-json-importer 似乎是一个不错的候选者，但将它添加到 Angular 9 CLI 应用程序对我来说并不明显。

这篇 StackOverflow 帖子不久前谈到了这个话题，但它涉及修改node_modules几乎不可持续的资源。

原始文档中还有一些关于如何在非 Angular 应用程序中调整 webpack 的输入。我不知道如何将其与通过 CLI 构建的 Angular 应用程序相关联。

Webpack / sass-loader Blockquote

网络包 v1

import jsonImporter from 'node-sass-json-importer';

// Webpack config
export default {
  module: {
    loaders: [{
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }],
  },
  // Apply the JSON importer via sass-loader's options.
  sassLoader: {
    importer: jsonImporter()
  }
};

网络包 v2

import jsonImporter from 'node-sass-json-importer';

// Webpack config
export default {
  module: {
    rules: [
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          },
        },
        {
          loader: 'sass-loader',
          // Apply the JSON importer via sass-loader's options.
          options: {
            importer: jsonImporter(),
          },
        },
      ],
    ],
  },
};

Answer 1

您可以node_modules通过使用@angular-builders/custom-webpack设置自定义 Webpack 规则以及node-sass-json-importer在 SCSS 文件中导入 JSON 文件来完成此操作，而无需更改任何文件。

您必须安装node-sass该implementation选项，因为node-sass-json-importer它与node-sass.

1. 安装软件包@angular-builders/custom-webpack，node-sass-json-importer然后node-sass：

   npm i -D @angular-builders/custom-webpack node-sass-json-importer node-sass
   

2. 创建 Webpack 配置文件 ( webpack.config.js) 到项目根目录，内容如下：

   const jsonImporter = require('node-sass-json-importer');
   
   module.exports = {
     module: {
       rules: [{
         test: /\.scss$|\.sass$/,
         use: [
           {
             loader: require.resolve('sass-loader'),
             options: {
               implementation: require('node-sass'),
               sassOptions: {
                 // bootstrap-sass requires a minimum precision of 8
                 precision: 8,
                 importer: jsonImporter(),
                 outputStyle: 'expanded'
               }
             },
           }
         ],
       }],
     },
   }
   

3. 更改builder到@angular-builders/custom-webpack:[architect-target]并添加customWebpackConfig选项build，serve并test构建目标内angular.json：

   "projects": {
     ...
     "[project]": {
       ...
       "architect": {
         "build": {
           "builder: "@angular-builders/custom-webpack:browser",
           "options": {
             "customWebpackConfig": {
               "path": "webpack.config.js"
             },
             ...
           },
           ...
         },
         "serve": {
           "builder: "@angular-builders/custom-webpack:dev-server",
           "customWebpackConfig": {
             "path": "webpack.config.js"
           },
           ...
         },
         "test": {
           "builder: "@angular-builders/custom-webpack:karma",
           "customWebpackConfig": {
             "path": "webpack.config.js"
           },
           ...
         },
       },
       ...
     },
     ...
   }
   

现在您可以.json在任何组件.scss文件中包含任何文件：

hello-world.component.scss：

npm i -D @angular-builders/custom-webpack node-sass-json-importer node-sass

hello-world.vars.json：

const jsonImporter = require('node-sass-json-importer');

module.exports = {
  module: {
    rules: [{
      test: /\.scss$|\.sass$/,
      use: [
        {
          loader: require.resolve('sass-loader'),
          options: {
            implementation: require('node-sass'),
            sassOptions: {
              // bootstrap-sass requires a minimum precision of 8
              precision: 8,
              importer: jsonImporter(),
              outputStyle: 'expanded'
            }
          },
        }
      ],
    }],
  },
}

我已经创建了一个 Github 存储库，您可以从这里克隆和测试所有这些工作：https : //github.com/clytras/angular-json-scss

"projects": {
  ...
  "[project]": {
    ...
    "architect": {
      "build": {
        "builder: "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
            "path": "webpack.config.js"
          },
          ...
        },
        ...
      },
      "serve": {
        "builder: "@angular-builders/custom-webpack:dev-server",
        "customWebpackConfig": {
          "path": "webpack.config.js"
        },
        ...
      },
      "test": {
        "builder: "@angular-builders/custom-webpack:karma",
        "customWebpackConfig": {
          "path": "webpack.config.js"
        },
        ...
      },
    },
    ...
  },
  ...
}