vue cli webpack中使用sass的方法

更新时间：2018年02月24日 10:49:19 作者：爱lv行

这篇文章主要介绍了vue cli webpack中使用sass的方法,需要的朋友可以参考下

1：安装依赖

npm install sass-loader node-sass --save-dev

2：html中修改style

<style lang="sass">
 /* write sass here */
</style>

3: 使用正常sass 语法

//但是会报错
<style lang="sass">
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
 border: $highlight-border
 }
 // 解决方案一 记得属相前面一定是两个空格
<style lang="sass">
 $highlight-color: #F90
 $highlight-border: 1px solid $highlight-color
 .selected 
  border: $highlight-border
</style>
// 解决方案二 sass 修改为 scss
<style lang="scss">
 $highlight-color: #F90;
 $highlight-border: 1px solid $highlight-color;
 .selected {
  border: $highlight-border
 }
</style>
// 官方解决方案 你需要配置 vue-loader 的选项
{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
 loaders: {
  scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
 }
 }
}

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

4：引用sass/scss 文件

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

总结

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

您可能感兴趣的文章:

用vue快速开发app的脚手架工具
这篇文章主要介绍了用vue快速开发app的脚手架工具，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
vue中的循环遍历对象、数组和字符串
这篇文章主要介绍了vue中的循环遍历对象、数组和字符串，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue.js：使用Vue-Router 2实现路由功能介绍
本篇文章主要介绍了Vue.js：使用Vue-Router 2实现路由功能介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02
vue addRoutes实现动态权限路由菜单的示例
本篇文章主要介绍了vue addRoutes实现动态权限路由菜单的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
详解关于element el-button使用$attrs的一个注意要点
这篇文章主要介绍了详解关于element el-button使用$attrs的一个注意要点,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
详解vue-validator（vue验证器）
本篇文章主要介绍了vue-validator（vue验证器）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
vue实现文件上传
这篇文章主要为大家详细介绍了vue实现文件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue2父子组件传值举例详解
这篇文章主要给大家介绍了关于Vue2父子组件传值的相关资料,Vue 2.0 中父子组件之间的传值可以通过属性(prop)和事件(event)实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
发布订阅模式在vue中的实际运用实例详解
订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这篇文章主要介绍了发布订阅模式在vue中的实际运用,需要的朋友可以参考下
2019-06-06
vue3+ts使用APlayer的示例代码
这篇文章主要介绍了vue3+ts使用APlayer的示例代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-08-08