1. Install sass-loader
npm install sass-loader --save-dev
2. Install dart-sass
npm install sass --save-dev
or can be installed at the same time
npm i sass sass-loader -D
Note: You can also choose to install node-sass to replace dart-sass, but it is not recommended!
1. Both dart-sass and node-sass are tools used to compile sass into css. But node-sass is associated with the Node.js version, which leads to the situation that node-sass will not work once the local Node.js is upgraded. 2. On
October 27, 2020, the official Sass team officially announced that Libsass will be abandoned , and Node Sass and SassC based on it, and recommend users to use Dart Sass.
3. The dart-sass package on npm has been deprecated and renamed directly to sass
4. dart-sass does not support /deep/, it needs to be changed to::v-deep **
After the installation is complete, it can be used in vue
<style lang='scss'>
$back-color: green;
.box {
width: 400px;
height: 400px;
background-color: $back-color;
}
</style>