Question

我已经和Ionic合作了一段时间，但我不确定如何使用scss。在构建一个新的Ionic项目时，我有一个带有scss文件的scss文件夹。我已经尝试了所有可能但我的更改不会影响我的页面的CSS。任何人都可以告诉我我需要做什么来处理scss吗？我们要做的就是更改Ionic提供的默认颜色变量。

我已按照here所述完成了必要的设置。

这是我在scss文件夹中的ionic.app.scss文件：

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

这是lib/ionic/scss文件夹中的_variables.scss文件：

// Colors
// -------------------------------

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;


// Base
// -------------------------------

$font-family-sans-serif:           '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;

$font-family-light-sans-serif:    '-apple-system', "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default;

_variables.scss中所做的更改未显示在我的应用中，我不明白为什么。

在运行gulp之后，这是我的控制台。

abc-Mac-mini:FileFolder xyz$ gulp
[10:34:49] Using gulpfile /Applications/MAMP/htdocs/FileFolder/gulpfile.js
[10:34:49] Starting 'sass'...
[10:34:50] Finished 'sass' after 731 ms
[10:34:50] Starting 'default'...
[10:34:50] Finished 'default' after 15 μs
abc-Mac-mini:FileFolder xyz$

Answer 1

您的离子项目中将包含以下文件。

www/css/ionic.app.css

从此文件中复制所有css并将其粘贴到您的scss文件中。

现在开始在scss文件中进行更改

Answer 2

如果我理解正确，您尝试覆盖Ionic提供的默认颜色，例如$positive和$assertive。建议的方法是覆盖Ionic定义的现有变量，而不是通过更改Ionic源文件中的变量。

当您启动Ionic项目时，您会在ionic.app.scss文件中获得以下注释：

/*
  To customize the look and feel of Ionic, you can override the variables
  in ionic's _variables.scss file.

  For example, you might change some of the default colors:

  $light:                           #fff !default;
  $stable:                          #f8f8f8 !default;
  $positive:                        #387ef5 !default;
  $calm:                            #11c1f3 !default;
  $balanced:                        #33cd5f !default;
  $energized:                       #ffc900 !default;
  $assertive:                       #ef473a !default;
  $royal:                           #886aea !default;
  $dark:                            #444 !default;
*/

因此，您所要做的就是取消注释要更改的变量，并将其反映在您的应用中。确保在导入Ionic之前声明这些变量，否则Ionic颜色变量将覆盖您的自定义变量。

一个例子：

$positive: #FF0000 !default;

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

这会将使用$positive颜色的所有元素变为红色。还要确保检查控制台以查看是否存在编译错误，因为如果CSS文件中存在错误，gulp将无法编译。此外，不要忘记每次进行更改时都需要编译scss。当您使用ionic serve进行测试或运行gulp watch时，会自动完成此操作。

如何在Ionic中使用scss更改默认颜色变量？

2 个答案: