如何在vue中使用sass

1,602 阅读1分钟

安装sass

安装教程链接: https://www.sass.hk/install/

在vue中使用sass

参考链接: https://www.jianshu.com/p/8e60048baeb7

打开控制台:输入命令行

  • 如果是没有淘宝镜像的,先下载淘宝镜像,之后的下载速度比较快

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    cnpm install sass-loader node-sass vue-style-loader --D

  • 搞定后,打开build文件夹下的webpack.base.conf.js文件,在module代码下,添加代码:

    {  //上面是默认的!不用改!下面是没有的需要手动添加,相当于是编译识别sass!
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
    
  • 最后在页面文件中添加代码,这代码是转rem单位的

    <style lang="scss" scoped>
        @function rem($len) {
        @return $len * 16/750 + rem;
        }
    </style>
    

    最后,不懂就百度吧