Angular:如何将JSON变量解析为SCSS [英] Angular: How to parse JSON variables into SCSS

问题描述

在Angular应用程序中，我通过普通的 D3 或

Within an Angular application, I do D3 visuals through either plain D3 or Vega. There's also SCSS styling going on.

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

I'd like to be able to refer to the same global variables for styling from Javascript and from SCSS. JSON files do the trick very well for storing settings that I load into Typescript through a simple import statement. But how does one go about doing the same from SCSS ?

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

node-sass-json-importer seems like a good candidate but adding it to an Angular 9 CLI application isn't obvious to me.

此StackOverflow帖子在主题早有，但涉及在node_modules下修改资源，这很难持续.

This StackOverflow post brushed on the topic a while back, but it involved modifying resources under node_modules which is hardly sustainable.

原始文档中还有一些有关

There are also some inputs in the orginal doc as to how one can go about tweaking webpack in a non-Angular app. I do not know how to relate this to an Angular app built through the CLI.

Webpack/Sass加载器 引用

Webpack / sass-loader Blockquote

Webpack v1

Webpack 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()
  }
};

Webpack v2

Webpack 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(),
          },
        },
      ],
    ],
  },
};

推荐答案

您可以使用

You can do it without changing any node_modules files by using @angular-builders/custom-webpack to setup custom Webpack rules and as you mention node-sass-json-importer to import JSON files inside SCSS files.

您必须为implementation选项安装 node-sass node-sass-json-importer 与

You'll have to install node-sass for the implementation option because node-sass-json-importer is compatible with node-sass.

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

2. 使用以下内容将Webpack配置文件(webpack.config.js)创建到项目根目录:

3. Create Webpack config file (webpack.config.js) to the project root directory with the following contents:

   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'
               }
             },
           }
         ],
       }],
     },
   }
   

4. 将builder更改为@angular-builders/custom-webpack:[architect-target]并在angular.json内的build，serve和test构建目标中添加customWebpackConfig选项:

5. Change builder to @angular-builders/custom-webpack:[architect-target] and add customWebpackConfig option to build, serve and test build targets inside 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"
           },
           ...
         },
       },
       ...
     },
     ...
   }
   

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

Now you can include any .json file inside any component .scss file:

@import 'hello-world.vars.json';

.hello-bg {
  padding: 20px;
  background-color: $bg-color;
  border: 2px solid $border-color;
}

hello-world.vars.json:

{
  "bg-color": "yellow",
  "border-color": "red"
}

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

I have created a Github repository with all these working that you can clone and test from here: https://github.com/clytras/angular-json-scss

git clone https://github.com/clytras/angular-json-scss.git
cd angular-json-scss
npm install
ng serve

这篇关于Angular:如何将JSON变量解析为SCSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！