zoukankan      html  css  js  c++  java
  • vue scss 使用 及 踩坑

    1.安装

    npm install sass-loader node-sass vue-style-loader --save

    若运行时报错:

    Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

    这是因为当前sass的版本太高,webpack编译时出现了错误,找到package.json文件,将 "sass-loader": "^8.0.0",更换成了 "sass-loader": "^7.3.1",

    或者卸载当前版本,然后安装指定的版本

    npm uninstall sass-loader
    npm install sass-loader@7.3.1 --save-dev

    2.build/webpack.base.conf.js,在rules中添加scss规则

    {
      test: /.scss$/,
      loaders: ['style', 'css', 'sass']
    }

    3.在vue文件中添加

    <style lang='scss'>
    </style>

    必须添加,无论是引入文件还是页面里写,若引入文件未写则不会生效。

    4.全局引用时需要安装sass-resources-loader

    npm install sass-resources-loader --save-dev

    5.修改build中的utils.js

    scss: generateLoaders('sass')

    修改为:

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
            //你自己的scss全局文件的路径
          resources: path.resolve(__dirname, '../src/assets/css/common.scss')
        }
      }
    )
     
  • 相关阅读:
    python中的编码问题
    CVPR2018 Tutorial 之 Visual Recognition and Beyond
    hdu 1376 Octal Fractions
    hdu 1329 Hanoi Tower Troubles Again!
    hdu 1309 Loansome Car Buyer
    hdu 1333 Smith Numbers
    hdu 1288 Hat's Tea
    hdu 1284 钱币兑换问题
    hdu 1275 两车追及或相遇问题
    hdu 1270 小希的数表
  • 原文地址:https://www.cnblogs.com/xulei1992/p/12101068.html
Copyright © 2011-2022 走看看