在另一个`.scss`文件中包含`.scss`文件？

Question

如何在另一个.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

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

Answer 1

您可以像这样导入它;

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

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

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

Answer 2

您可以通过以下方式包含部分内容：

@import "partial";

导入的文件需要一个下划线，因此sass会识别它包含在内：_partial.scss

Answer 3

您可以使用 @use 规则。该规则将另一个Sass文件作为模块加载，这意味着您可以在Sass文件中使用基于文件名的命名空间来引用其变量，混入和函数。使用文件还将在编译输出中包含它生成的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;
}

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

Answer 4

好的，似乎我的app.scss文件与Bootstrap.css文件冲突。 因为我想要应用background !important属性，而不是bootstrap css文件。我在此属性中添加了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' ]); }); 已更新，以便相应地满足我的需求：

userName

这就是我如何解决它。

Answer 5

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

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

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