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

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

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

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

Answer 2

您可以使用 @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;
}

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

Answer 3

你可以这样导入；

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

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

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

Answer 4

好的，看来我的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'
    ]);
 });

这就是我修复它的方法。

Answer 5

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

@import "partial";

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