vue中使用sass和less

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  [email protected]  --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";`
             }
         }
     } }

sass中使用判断

less使用

npm i  node-sass --save

npm i  less-loader@6.0.0 --save

在.vue文件中使用less

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

在element中使用

引入全局的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，内容如下

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

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

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

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