37

如何将.scss文件包含在另一个.scss文件中？我试图把它写在一个文件中：app.scss：

@include('buttons');
@include('dropzone');

body {

    background: $primaryColor;
    overflow-x: hidden; /*Clip the left/right edges of the content inside the <div> element - if it overflows the element's content area: */
    height: 100%; /* Cover all (100%) of the container for the body with its content */
    padding-top: 70px;
} /* more css code here */

它返回一个错误：invalid css after @import

我尝试在主文件中包含其他 2 个 scss 文件scss，因此最终将全部编译为一个css文件。这怎么可能？

4

5 回答 5

40

你可以像这样导入它；

@import "../../_variables";

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

根据你的目录，它会做你想做的事。

于 2016-08-02T13:38:33.713 回答
9

您可以通过执行以下操作来包含部分内容：

@import "partial";

导入的文件需要一个下划线，所以 sass 会识别它被包含：_partial.scss

于 2016-08-01T23:38:05.010 回答
5

您可以使用@use规则。此规则将另一个 Sass 文件作为模块加载，这意味着您可以在 Sass 文件中使用基于文件名的命名空间来引用它的变量、mixin 和函数。使用文件还将在编译输出中包含它生成的 CSS！

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

看看如何使用@use 'base'；在styles.scss文件中

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

您不需要包含文件扩展名。

于 2020-01-06T10:24:04.680 回答
1

@osherdo您无需添加!important覆盖引导CSS。

body 
{
background: #4d94ff; /* Use to override Bootstrap css settings. */
}

首先，您需要验证引导程序在页面上呈现的位置以及引导程序 CSS 文件的权重是多少。之后，您可以'css/app.css'在引导后放置文件，然后它将起作用。然后，您可以轻松覆盖整个引导程序 CSS。

在此处输入图像描述

于 2021-06-20T07:03:45.400 回答
0

好的，看来我的app.scss文件与 Bootstrap.css 文件冲突。因为我希望app.scss background应用属性，而不是引导 css 文件。我已!important在此属性中添加以覆盖引导样式。：

body 
{
background: #4d94ff !important; /* Used to override Bootstrap css settings. */
}

此外，gulpfile.js已相应更新以适应我的需求：

var elixir = require('laravel-elixir');


elixir(function (mix) {
mix.sass('app.scss', 'resources/assets/css')
 .styles([
'app.css'
 ], 'public/css/app.css');
 mix.version([
   'css/app.css'
    ]);
 });

这就是我修复它的方式。

于 2016-08-05T00:41:03.250 回答