微客导航 » 文章资讯 » vue cli webpack中使用sass的方法

vue cli webpack中使用sass的方法

2023-09-16 03:55:05 165

1：安装依赖

npminstallsass-loadernode-sass--save-dev

2：html中修改style


/*writesasshere*/

3:使用正常sass语法

//但是会报错

$highlight-color:#F90;
$highlight-border:1pxsolid$highlight-color;
.selected{
border:$highlight-border
}
//解决方案一记得属相前面一定是两个空格

$highlight-color:#F90
$highlight-border:1pxsolid$highlight-color
.selected
border:$highlight-border

//解决方案二sass修改为scss

$highlight-color:#F90;
$highlight-border:1pxsolid$highlight-color;
.selected{
border:$highlight-border
}

//官方解决方案你需要配置vue-loader的选项
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
scss:'vue-style-loader!css-loader!sass-loader',//
sass:'vue-style-loader!css-loader!sass-loader?indentedSyntax'//
}
}
}

链接: https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html

4：引用sass/scss文件

@import"./common/scss/mixin";

总结

以上所述是小编给大家介绍的vuecliwebpack中使用sass的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

vue cli webpack中使用sass的方法

热门推荐

随机推荐