如何在最新的vue-cli启动项目中使用SASS/SCSS？

Question

我需要在我的项目中使用SASS或SCSS.

我使用vue-cli制作了最新版本的初学者项目.

有没有人在使用webpack在最新的初学者项目中使sass/scss工作成功？

Answer 1

1. 您安装必要的依赖项

   npm install -D node-sass sass-loader

2. 对于全局样式,只需将文件导入main.js:

   import './styles/my-styles.scss'

3. 在.vue文件中,将lang添加到<style>元素中.

   <style lang="scss">

如果使用webstorm:

<style lang="scss" rel="stylesheet/scss">

Answer 2

作为 的最新文档@vue/cli-service": "^3.9.0"，首先需要安装两个 npm dev 依赖项，即 sass、sass-loader

萨斯

npm install -D sass-loader sass

yarn add --dev sass-loader sass

然后你可以导入相应的文件类型，或者在 *.vue 文件中使用它们：

<style lang="scss">
  $color: red;
</style>

请参阅此处的最新文档