Angular-cli创建的项目可以选择css的预处理scss作为style文件的默认预处理格式。scss可以设置变量,函数,同时使用继承,混入等方法达到更方便,通用的效果。
通常情况下,我们会设计一些通用的变量在各个地方使用,如何将通用变量的文件一次引入,全局使用呢?
解决办法:
// 通用变量文件 _variables.scss/* You can add global styles to this file, and also import other style files */ @import 'assets/scss/variables'; // angular.json 配置预处理路径和样式路径
$red: #e0301e;
// 全局scss文件 styles.scss
"build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/angular-toolkits", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "stylePreprocessorOptions": { "includePaths": [ "src/assets/scss" ], "styles": [ "src/styles.scss" ], "scripts": [] },
// 某个component使用$red变量 sde-menu-items.scss
button {
background-color: $red
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。