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