脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue cli webpack sass

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隐藏路由的实现方法

    vue隐藏路由的实现方法

    这篇文章主要介绍了vue隐藏路由的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • Vue2中Element DatePicker组件设置默认日期及控制日期范围

    Vue2中Element DatePicker组件设置默认日期及控制日期范围

    后台项目想使用时间选择器选择一段时间进行数据筛选,所以下面这篇文章主要给大家介绍了关于Vue2中Element DatePicker组件设置默认日期及控制日期范围的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 利用vue写todolist单页应用

    利用vue写todolist单页应用

    有很多关于vue的todolist小程序，这篇文章主要介绍了 用vue写todolist单页应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 关于axios配置请求头content-type实例详解

    关于axios配置请求头content-type实例详解

    现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,下面这篇文章主要介绍了关于axios配置请求头content-type的相关资料,需要的朋友可以参考下
    2022-04-04
  • Vue多选列表组件深入详解

    Vue多选列表组件深入详解

    这篇文章主要介绍了Vue多选列表组件深入详解，这个是vue的基本组件，有需要的同学可以研究下
    2021-03-03
  • Vue状态管理库Vuex的入门使用教程

    Vue状态管理库Vuex的入门使用教程

    Vuex是一个专门为Vue.js应用程序开发的状态管理库。它采用了一个集中式的架构，将应用程序的所有组件的状态存储在一个单独的地方。这使得状态的管理和维护变得更加容易
    2023-03-03
  • 聊聊Vue.js的template编译的问题

    聊聊Vue.js的template编译的问题

    这篇文章主要介绍了聊聊Vue.js的template编译的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Vue3打包部署报错的解决方案

    Vue3打包部署报错的解决方案

    这篇文章主要介绍了Vue3打包部署报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • vite分目录打包及去掉默认的.gz 文件的操作方法

    vite分目录打包及去掉默认的.gz 文件的操作方法

    Vite在默认配置下会将资源打包至assets文件夹并添加哈希值,不同于Webpack的多文件夹存放方式,Vite只对public文件夹不进行打包处理,而Webpack不打包public和static文件夹,本文介绍vite分目录打包及去掉默认的.gz 文件的操作方法,感兴趣的朋友一起看看吧
    2024-09-09
  • vue长列表优化之虚拟列表实现过程详解

    vue长列表优化之虚拟列表实现过程详解

    前端的业务开发中会遇到不使用分页方式来加载长列表的需求,下面这篇文章主要给大家介绍了关于vue长列表优化之虚拟列表实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论