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

问题描述：

如何将.scss文件包含在另一个.scss文件中？我试图在文件中这样写： app.scss：将`.scss`文件包含在另一个`.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文件。这怎么可能？

答

可以包括部分通过这样做：

@import "partial";

导入的文件需要下划线，所以青菜会认识到它包括：_partial.scss

感谢that.It返回另一个错误：'''吞掉-通知：Laravel药剂]萨斯编译失败：资源/资产/上海社会科学院/ app.scss 错误：@import指令要求的URL或引用路径上stdin的第4行 >> @import（'buttons'）; ^''' 想跑都： ''' NPM安装-g一饮而尽，青菜和NPM安装一饮而尽，萨斯 ''' 仍然得到同样的错误如上。 – osherdo

和这两个文件都在同一个目录中？ –

已更新我的回答，请检查您的部分是否以下划线开头 –

答

可以导入像这样;

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

@import "../_mixins"; 

@import "_main"; 

@import "_login"; 

@import "_exception"; 

@import "_utils"; 

@import "_dashboard"; 

@import "_landing";

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

我做到了。用gulp进行编译并不会产生任何错误。事情是这个样式根本不适用于页面。 – osherdo

您需要将您的sass文件夹预编译为css文件夹，然后将编译后的css包含到您的页面中。 –

答

好吧，所以它似乎是我的app.scss文件与Bootstrap.css文件相冲突。因为我想要应用app.scssbackground属性，而不是bootstrap 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' 
    ]); 
});

这就是我如何固定它。

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

相关推荐