美文网首页
vue-less与vue-sass

vue-less与vue-sass

作者: 翟小乙 | 来源:发表于2022-02-24 14:05 被阅读0次
    1. less 和 sass 的不同以及使用场景?
    • Less是基于javascript,在客户端处理,适合开发时候使用
    • Sass是基于ruby, 在服务端处理。
    npm i node-sass@4.14.1
    npm i sass-loader@7.3.1 --save-dev
    
    image.png
    2. 如何安装并使用sass
    • npm i sass
    • npm i node-sass@4.14.1 // 安装
    • npm i -D sass-loader@8.x // 安装

    报错问题:

    image.png
    • npm uninstall --save sass-loader // 卸载
    • npm i -D sass-loader@8.x // 安装
    • npm uninstall --save node-sass // 卸载
    • npm i node-sass@4.14.1 // 安装

    // 如果node-sass安装失败,也可以直接在package.json中写上版本号,删除node_modules文件夹,重新 npm i 即可

    指定版本号安装: npm sass-loader@7.3.1 node-sass --save-dev

    3. 安装less 报错:

    Syntax Error: TypeError: this.getOptions is not a function less-loader版本问题
    解决步骤:

    1. 卸载现在版本的

    npm uninstall --save less-loader

    1. 安装7.3.0版本的

    npm install less-loader@7.3.0 -D

    1. 如何安装less 并使用?

    1.npm i less
    2.npm install less-loader
    3.<style lang="less" scoped>

    4. 使用less中的全局变量
    1. 安装style-resources-loader

    npm i style-resources-loader -D
    npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

    1. 如果没有 vue.config.js 文件就新建一个文件
      在文件中写入 如下代码
    const path = require('path')
    module.exports = {
      pluginOptions: { // 第三方插件配置
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [path.resolve(__dirname, './src/styles/variables.less')] // less所在文件路径
        }
      }
    }
    

    注意: 如果报错 关闭vscode 重新启动

    相关文章

      网友评论

          本文标题:vue-less与vue-sass

          本文链接:https://www.haomeiwen.com/subject/kkmzlrtx.html