Sass的功能比Less强大,好用

scss中使用/deep/深度选择器报错的解决办法

用 ::v-deep

sass使用

npm i sass-loader node-sass --save

sass-loader版本过高会报错

npm i  sass-loader@8.0.2  --save  或者 7.1.0

npm i  node-sass@4.14.1  --save  

如果遇到报错去package.json中替换成下面的兼容node16+版本：

"devDependencies": {
    "sass-loader": "^10.2.0",
    "node-sass": "^6.0.1",
  },

然后在src同级目录下建vue.config.js

 module.exports = {
     css: {
         loaderOptions: {
            // 没有分号会报错
             sass: {
                 data: `@import "@/assets/styles/variables.scss";`
             }
         }
     } }

<style lang="scss" scoped>
$test:red;
.main {
  width: 300px;
  height: 200px;
  background: $theme-color;
  .text {
    color: $test;
    font-size: $abc;
  }
}
</style>

sass中使用判断

less使用

npm i  node-sass --save

npm i  less-loader@6.0.0 --save

在.vue文件中使用less

在.vue文件中，只需要在style节点加上lang="less"属性，即可可直接使用less

<style lang="less" scoped>
@width: 400px;
@height: 200px;

.content {
    width: @width;
    height: @height;
    background-color: yellowgreen;
}
</style>

在element中使用

<style lang="scss" scoped>
.queryOrgNo {
  ::v-deep .el-input__inner {
    height: 28px;
    border-radius: 4px;
    font-size: 14px;
  }
}
</style>

引入全局的less文件

引入全局的less需要安装插件

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

如果项目使用 vue-cli 构建，那就可以直接使用：

vue add style-resources-loader

选择预处理器，本文使用 less
配置文件

安装插件完成后配置 vue.config.js 中的 pluginOptions，代码如下：

const path = require('path')

module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 全局less变量存储路径
                path.resolve(__dirname, '@/src/assets/styles/common.less'),
            ]
        }
    }
}

假设有一个包含全局样式的less文件，路径是src/assets/common.less，内容如下

<style lang="less" scoped>
@import url("@/assets/styles/common.less");
@border:1px solid #ccc;
@background: teal;
.main {
  width: 500px;
  height: 300px;
  border: @border;
  background: @background;
  .text {
    color: @color;
  }
}
</style>

less-用法：简介、变量、混合、嵌套、运算、转义、函数、映射、作用域、注释、导入、继承、条件判断

CSS预处理器 Sass和less 的优点,及详细使用

CSS预处理器 Sass和less 的优点链接

Sass和less区别
Sass和less区别详细