vue 项目 使用sass

1、
1-1、使用save会在package.json中自动添加。
npm install node-sass –save-dev
npm install sass-loader –save-dev
1-2、可以通过淘宝的npm镜像安装node-sass,解决以上问题。
$ npm install -g cnpm –registry=https://registry.npm.taobao.org (安装淘宝镜像)
cnpminstallnodesasssave使nodesass221webpack.base.config.jsscssmoduleloaders(vue1.0) c n p m i n s t a l l n o d e − s a s s – s a v e ( 使 用 淘 宝 镜 像 安 装 n o d e − s a s s ) 2 、 2 − 1 、 进 入 w e b p a c k . b a s e . c o n f i g . j s 配 置 s c s s m o d u l e – l o a d e r s ( v u e 1.0 ) npm install –save-dev sass-loader style-loader css-loader
{
test: /.vue/,  
                    loader: ‘vue-loader’,  
                    options: {  
                      loaders: {  
                        ‘scss’: ‘style-loader!css-loader!sass-loader’  
                      }  
                    }  
                  }  
        2-2、打开webpack.base.config.js在loaders里面加上  module – rules (vue2.0)  
                  {  
                    test: /.scss
/,                      loader: ‘vue-loader’,                      options: {                        loaders: {                          ‘scss’: ‘style-loader!css-loader!sass-loader’                        }                      }                    }          2-2、打开webpack.base.config.js在loaders里面加上  module – rules (vue2.0)                    {                      test: /.scss
/,
loaders: [“style”, “css”, “sass”]
},

3、如果需要在vue文件style标签使用scss的话,需要声明一下:
vue1.0

vue2.0

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值