vue-cli webpack 使用sass
来源:互联网 发布:逆战数据怎么开启 编辑:程序博客网 时间:2024/05/07 23:57
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";
阅读全文
0 0
- vue-cli webpack 使用sass
- webpack搭建的vue-cli项目如何使用sass?
- vue-cli中使用sass
- vue-cli手脚架模板使用sass
- 在vue+webpack中使用sass
- wenda1.1 使用vue-cli webpack
- 使用vue-cli搭建webpack模板项目
- vue+webpack+es6+sass
- Vue-cli+router+webpack
- webpack与vue-cli
- vue-cli + webpack + vue-router
- vue-cli vue2.0如何使用引入less或者sass
- vue-cli中配置sass
- vue-cli webpack在node环境下安装使用详解
- 【23】使用vue-cli脚手架搭建webpack项目基本结构
- vue-cli+webpack引入jQuery
- vue-cli中的webpack配置
- vue-cli webpack 引入 swiper
- sql还原备份数据
- JVM指令
- TouchXML 的使用例子
- Java线程Dump分析工具--jstack
- Android Studio平台下JNI开发:Java传参给C
- vue-cli webpack 使用sass
- opencv+清晰度检测
- APP崩溃测试用例设计
- 一些设计上的基本常识
- Hi3535录制音频无声音
- JavaScript的window.setTimeout()方法
- 面试题34:丑数
- XA事务与MySQL
- java6内置JS引擎初接触