如何在最新的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

在package.json的{​​{1}}中添加它，然后运行

scripts

请确保正确添加"compile:sass": "node-sass 'your main scss file location' 'your compiled css file location' -w" 和node-sass。

然后在您的App.vue文件中添加它，然后运行

sass-loader

这对我有用。

谢谢

Answer 3

作为@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>

请参阅latest documentation here