1 前言

说到sass我们并不陌生，sass最主要的作用就是简化项目中css的书写，sass的简介这里就不赘述。下面就直接说说如何在vue项目中使用sass

2 安装

参照网上的教程，需要安装sass-loader和node-sass这两个依赖，但当我执行npm i node-sass时却出现如下错误

...
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Python installation to use
npm ERR! gyp ERR! stack     at PythonFinder.fail (D:\software\WebStorm 2023.3.2\project\anime\node_modules\node-gyp\lib\find-python.js:330:47)
npm ERR! gyp ERR! stack     at PythonFinder.runChecks (D:\software\WebStorm 2023.3.2\project\anime\node_modules\node-gyp\lib\find-python.js:159:21)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (D:\software\WebStorm 2023.3.2\project\anime\node_modules\node-gyp\lib\find-python.js:228:18)
npm ERR! gyp ERR! stack     at PythonFinder.execFileCallback (D:\software\WebStorm 2023.3.2\project\anime\node_modules\node-gyp\lib\find-python.js:294:16)
npm ERR! gyp ERR! stack     at exithandler (node:child_process:427:5)
npm ERR! gyp ERR! stack     at ChildProcess.errorhandler (node:child_process:439:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:514:28)
npm ERR! gyp ERR! stack     at ChildProcess._handle.onexit (node:internal/child_process:289:12)
npm ERR! gyp ERR! stack     at onErrorNT (node:internal/child_process:476:16)
npm ERR! gyp ERR! stack     at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
npm ERR! gyp ERR! System Windows_NT 10.0.22621
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "D:\\software\\WebStorm 2023.3.2\\project\\anime\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="    
npm ERR! gyp ERR! cwd D:\software\WebStorm 2023.3.2\project\anime\node_modules\node-sass
npm ERR! gyp ERR! node -v v18.17.0
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in: C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-01-19T00_25_40_110Z-debug-0.log

出现上述错误的主要原因是node版本太高了，我的node版本为18（使用node -v来查看node版本），高版本需要安装sass来代替node-sass

所以，高node版本想要使用sass就需要安装sass-loader和sass这两个依赖

3 使用

只需要在vue文件style标签添加lang属性指定scss即可。详细sass的使用请参照官网Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

<template>
  <div class="test"></div>
</template>

<script>
export default {
  name: 'TestPage'
}
</script>

<style scoped lang="scss">
</style>

vue中使用sass的坑

1 前言

2 安装

3 使用