如何访问angular2个体组件中的全局SASS混合函数？

我在全局SCSS文件中有一个共同的SCSS混合函数。但我无法访问angular2组件内的mixin函数。如何访问angular2个体组件中的全局SASS混合函数？

我有全球style.scss具有以下功能混入

@mixin respond-to($breakpoint) { 
 
    @if $breakpoint == "small" { 
 
    @media (max-width: 767px) { 
 
     @content; 
 
    } 
 
    } 
 
    @else if $breakpoint == "medium" { 
 
    @media (min-width: 992px) { 
 
     @content; 
 
    } 
 
    } 
 
    @else if $breakpoint == "large" { 
 
    @media (min-width: 1200px) { 
 
     @content; 
 
    } 
 
    } 
 
}

我试图访问component.scss此混入功能类似

.procard{ 
 
width:50%; 
 
@include respond-to(small){ 
 
    .pro-card{ 
 
    width: 100%; 
 
    .pro-box{ 
 
     max-width: 320px; 
 
     margin:0 auto; 
 
    } 
 
    } 
 
} 
 
}

在运行这一点，显示错误

来源

2016-09-28 Maheswaran S

你有问题吗？ –

在'respond-to'定义之后''import''component.scss' in'style.scss'。 – 3rdthemagical

@MaheswaranS。你是否找到了这个问题的答案。有相同的要求！ –

您需要的Mixin lib导入到所有组件.scss文件，要使用它们。 phpStorm仍然会说，他不能找到mixin，但编译器会找到它。

来源

2016-12-16 12:25:46 Budi

您可以显式导入全局scss。或更好的方法是使用sass-resources-loader，它可以帮助您在组件之间使用共享scss，而无需显式导入它们。例如：

{ test: /\.scss$/, loader: ["raw-loader", "sass-loader", { loader: 'sass-resources-loader', options: { resources: ['./styles/global/_vars.scss', './styles/global/_mixins.scss'] }, } ] }

来源

2017-08-17 03:37:09

如何访问angular2个体组件中的全局SASS混合函数？

回答

相关问题