Angular CLI 如何把预处理变量变成全局的
Angular-cli创建的项目可以选择css的预处理scss作为style文件的默认预处理格式。scss可以设置变量,函数,同时使用继承,混入等方法达到更方便,通用的效果。
通常情况下,我们会设计一些通用的变量在各个地方使用,如何将通用变量的文件一次引入,全局使用呢?
解决办法: 这个方法有问题,似乎在angular-cli7 上不起作用
// 通用变量文件 _variables.scss
$red: #e0301e;
// 全局scss文件 styles.scss
/* You can add global styles to this file, and also import other style files */
@import 'assets/scss/variables';
// angular.json 配置预处理路径和样式路径
"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
}
方法二:
您只需要添加更多配置,因此在声明全局变量的地方,您需要将其包装起来:root{}
。所以src/styles/settings/_variables.scss
。
:root
{
--blue: #00b; // or any global you wish to share with components
}
然后,当您在SCSS中使用它们时,您将需要像这样访问它们。
.example-class {
background-color: var(--blue)
}
这就是我当前的项目如何处理全局变量,它似乎运作良好。这将消除在您使用的每个scss文件中导入变量的需要。
每天一点点
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!