Less,Sass安装

1.less

1.安装

1.如果没有安装less，请先安装less
npm i less-loader less --save-dev
2.如果需要定义全局变量，请安装
npm i style-resources-loader --save-dev
3.在项目根目录(src同级)创建vue.config.js并配置

const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
pluginOptions: { //第三方插件配置
'style-resources-loader': {
preProcessor: 'less',
patterns:[(, './src/assets/styles/vars.less')] //该地址为你的全局样式地址
}
}
}

2.使用

// vars.less
@my-bg-color: #f5f5f5;
@my-theme-color: #F04846;


// 页面
.my-header{
background: @my-theme-color;
}

提示：
如果，发现页面引入一直报错，说找不到或者不存在，或者定义无效，那么再去安装一下

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

正常情况下安装style-resources-loader时，vue-cli-plugin-style-resources-loader应该会一起安装了，不过有时候特殊原因导致vue-cli-plugin-style-resources-loader安装失败，所以会包这个错。安装完重启就可以用了。

2.scss

方式一

2.1 安装

npm i node-sass@4.14.1

npm i sass-loader@7 -D

npm i style-loader -D

2.2 vue.config.js

//vue-loader页面

module.exports = {
  module: {
    rules: [
      // ... 忽略其它规则

      // 普通的 `.scss` 文件和 `*.vue` 文件中的
      // `<style lang="scss">` 块都应用它
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // 插件忽略
}

方式二 (2022-02-08测试有效）

npm i style-loader@3.3.1
npm i sass@1.32.13
npm i sass-loader@10.1.1