Angular:如何将 JSON 变量解析为 SCSS [英] Angular: How to parse JSON variables into SCSS
问题描述
在 Angular 应用程序中，我通过普通的 D3 或 Vega.还有 SCSS 样式.
我希望能够从 Javascript 和 SCSS 中引用相同的全局变量以进行样式设置.JSON 文件可以很好地存储我通过简单的 import 语句加载到 Typescript 中的设置.但是如何从 SCSS 做同样的事情呢?
node-sass-json-importer 似乎是一个不错的候选者，但将它添加到 Angular 9 CLI 应用程序对我来说并不明显.
这篇 StackOverflow 帖子刷上了不久前的主题，但它涉及修改 node_modules 下的资源，这几乎是不可持续的.
原始文档中也有一些关于 如何在非 Angular 应用程序中调整 webpack.我不知道如何将其与通过 CLI 构建的 Angular 应用程序相关联.
<块引用>Webpack/sass-loader块引用
Webpack v1
从'node-sass-json-importer'导入jsonImporter；//网络包配置导出默认{模块: {装载机:[{测试:/\.scss$/,加载器:[样式"，css"，sass"]}],},//通过 sass-loader 的选项应用 JSON 导入器.sassLoader:{进口商: jsonImporter()}};<块引用>
Webpack v2
从'node-sass-json-importer'导入jsonImporter；//网络包配置导出默认{模块: {规则: [测试:/\.scss$/,用: ['样式加载器',{加载器:'css-加载器'，选项: {进口装载机:1},},{loader: 'sass-loader',//通过 sass-loader 的选项应用 JSON 导入器.选项: {进口商: jsonImporter(),},},],],},};您可以使用 @angular-builders/custom-webpack 来设置自定义 Webpack 规则，正如您提到的 node-sass-json-importer 在 SCSS 中导入 JSON 文件文件.
您必须安装 node-sass对于 implementation 选项，因为 node-sass-json-importer 与 node-sass.
安装包
@angular-builders/custom-webpack、node-sass-json-导入器和node-sass:npm i -D @angular-builders/custom-webpack node-sass-json-importer node-sass创建 Webpack 配置文件(
webpack.config.js)到项目根目录，内容如下:const jsonImporter = require('node-sass-json-importer');模块.出口 = {模块: {规则:[{测试:/\.scss$|\.sass$/,用: [{加载器:require.resolve('sass-loader'),选项: {实现:需要('node-sass')，sass选项:{//bootstrap-sass 要求最小精度为 8精度:8，进口商: jsonImporter(),输出样式:'扩展'}},}],}],},}将
builder更改为@angular-builders/custom-webpack:[architect-target]并将customWebpackConfig选项添加到build、serve和test在angular.json中构建目标:项目":{...[项目]": {...建筑师":{建造": {"builder: "@angular-builders/custom-webpack:browser",选项": {customWebpackConfig":{路径":webpack.config.js"},...},...},服务": {"builder: "@angular-builders/custom-webpack:dev-server",customWebpackConfig":{路径":webpack.config.js"},...},测试": {"builder: "@angular-builders/custom-webpack:karma",customWebpackConfig":{路径":webpack.config.js"},...},},...},...}
现在您可以在任何组件 .scss 文件中包含任何 .json 文件:
hello-world.component.scss:
@import 'hello-world.vars.json';.hello-bg {填充:20px；背景色:$bg-color;边框:2px 实心 $border-color;}hello-world.vars.json:
{"bg-color": "黄色",边框颜色":红色"}我已经创建了一个 Github 存储库，您可以从这里克隆和测试所有这些工作:https://github.com/clytras/angular-json-scss
git clone https://github.com/clytras/angular-json-scss.gitcd angular-json-scss安装服务Within an Angular application, I do D3 visuals through either plain D3 or Vega. There's also SCSS styling going on.
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 seems like a good candidate but adding it to an Angular 9 CLI application isn't obvious to me.
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-loader Blockquote
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
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.
You'll have to install node-sass for the implementation option because node-sass-json-importer is compatible with node-sass.
Install packages
@angular-builders/custom-webpack,node-sass-json-importerandnode-sass:npm i -D @angular-builders/custom-webpack node-sass-json-importer node-sassCreate 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' } }, } ], }], }, }Change
builderto@angular-builders/custom-webpack:[architect-target]and addcustomWebpackConfigoption tobuild,serveandtestbuild targets insideangular.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" }, ... }, }, ... }, ... }
Now you can include any .json file inside any component .scss file:
hello-world.component.scss:
@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"
}
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屋！
