2016-08-01 4 views
8

.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 개하는 SCS 파일을 포함하는 시도를, 그래서 궁극적으로 하나의 css 파일로 컴파일됩니다. 그게 어떻게 가능해? 말대꾸가 포함되어야 인식 할 수 있도록

@import "partial"; 

가져온 파일에 밑줄이 필요합니다 :

답변

3

는이 작업을 수행하여 부분을 포함 할 수

+0

덕분에 또 다른 오류를 반환합니다'''꿀꺽 - 통지 : [Laravel 비약] 말대꾸 컴파일 실패 : 자원/자산/말대꾸/app.scss 오류 : @import 지시어는 URL을 필요로하거나 패스 를 인용 stdin의 4 번 줄 >> @import ('buttons'); ^''' 모두를 실행하려고 : ''' NPM은 -g 꿀꺽 - 말대꾸와 NPM은 여전히 ​​위와 같은 오류가 꿀꺽 - 말대꾸 ''' 를 설치합니다. – osherdo

+0

두 파일이 같은 디렉토리에 있습니까? –

+0

내 대답이 업데이트되었습니다. 부분이 밑줄로 시작하는지 확인하십시오. –

7

당신은 다음과 같이 가져올 수 있습니다 _partial.scss;

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

@import "../_mixins"; 

@import "_main"; 

@import "_login"; 

@import "_exception"; 

@import "_utils"; 

@import "_dashboard"; 

@import "_landing"; 

귀하의 디렉토리에 따르면 원하는대로 할 수 있습니다.

+0

그랬습니다. 그리고 꿀꺽 꿀꺽 마시지 않고 편집하면 오류가 발생하지 않습니다. 스타일은 페이지에 전혀 적용되지 않습니다. – osherdo

+1

sass 폴더를 css 폴더에 미리 컴파일 한 다음 컴파일 된 CSS를 페이지에 포함시켜야합니다. –

0

그래, 내 app.scss 파일이 Bootstrap.css 파일과 충돌하는 것 같습니다. 부트 스트랩 CSS 파일 대신 app.scssbackground 속성을 적용하기를 원했기 때문입니다. 나는

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

는 또한, gulpfile.js 그에 따라 내 요구에 적합하게 업데이트되었습니다 : 부트 스트랩 스타일 오버라이드 (override)이 속성에 !important를 추가했습니다 :

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' 
    ]); 
}); 

을 그리고 내가 그것을 해결 방법은 다음과 같습니다. that.It에 대한