Less,Sass安装

度vApud

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'
        ]
      }
    ]
  },
  // 插件忽略
}
阅读 178
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏