Question

在node_module组件中，我有一堆我要覆盖的sass变量。例如，组件中具有！default规则的变量：

$header-bg: red !default;

我想在我的angular-cli项目的全局样式表中将此变量覆盖为蓝色。

简单地添加$header-bg: blue;不起作用。我该怎么做才能覆盖那些sass变量？

编辑：我尝试了以下几点。

我将$header-bg: red !default;变量放入一个名为overridables.scss的单独文件中，并将其导入到我的全局样式表文件中，并且确实如此：

$header-bg: blue;

@import "~mypackage/styles/overridables.scss";

这也不起作用。

在Ionic中覆盖默认变量可以通过简单地将override添加到我们的variables.scss来完成。他们是怎么做到的？

Answer 1

您好从node_modules编辑组件，只需将其导入并放入.angular-cli.json。

例如，假设您要修改bootstrap 4变量。

<强> 1。创建新文件src/assets/bootstrap/index.scss：

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/root";
...

这只是从bootstrap复制所有文件scss。

<强> 2。在_variable.scss

中创建src/assets/bootstrap

因为我们想要更新默认变量，所以我们需要创建自定义_variable.scss。只需从node_modules/bootstrap/scss/_variables.scss

复制

//
// Color system
//

// stylelint-disable
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;

第3。最后包括index.scss到.angular-cli.json：

"styles": [
  "styles.css",
  "assets/bootstrap/index.scss"
],

现在，每当你想要从bootstrap覆盖默认变量时，只需添加到_variable.scss，变量默认值就会改变。

Answer 2

您是否尝试使用angular.cli中的样式对象添加文件，例如

"apps": [
    {
      "root": "src",
      ...other config here
      "styles": [
        "../styles/overridables.scss",
         ...more css files
        ]
     }

我相信angular.cli的样式部分中指定的文件是在节点模块包中的css之后应用的。

在不同的angular-cli项目中覆盖组件的默认sass变量

2 个答案: