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

时间:2016-08-01 23:34:25

标签: sass scss-lint

如何在另一个.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文件。怎么可能?

5 个答案:

答案 0 :(得分:19)

您可以像这样导入它;

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

@import "../_mixins";

@import "_main";

@import "_login";

@import "_exception";

@import "_utils";

@import "_dashboard";

@import "_landing";

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

答案 1 :(得分:5)

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

@import "partial";

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

好的,似乎我的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

这就是我如何解决它。

答案 4 :(得分:0)

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

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

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

enter image description here