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版本问题
解决步骤:
- 卸载现在版本的
npm uninstall --save less-loader
- 安装7.3.0版本的
npm install less-loader@7.3.0 -D
- 如何安装less 并使用?
1.npm i less
2.npm install less-loader
3.<style lang="less" scoped>
4. 使用less中的全局变量
- 安装style-resources-loader
npm i style-resources-loader -D
npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev
- 如果没有 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 重新启动
网友评论