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

【问题标题】：How to use SASS / SCSS with latest vue-cli starter project?如何在最新的 vue-cli 启动项目中使用 SASS / SCSS？
【发布时间】：2017-10-16 14:21:40
【问题描述】：

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

我使用 vue-cli 制作了一个最新版本的入门项目。

有人在使用 webpack 的最新入门项目中成功地使 sass/scss 工作吗？

【问题讨论】：

【解决方案1】：

如果使用 webstorm：

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

【讨论】：

第二个不适用于 vue-cli 的默认项目。使用 sass 的规则扩展 webpack 很重要
@KirillMatrosov 你是否使用了最新vuejs-templates/webpack 的模板。它实际上对我有用。
@Illuminator，我从其他人那里对这个 scss 的“@import”有错误。 “意外字符 '@' (1:0) 您可能需要适当的加载程序来处理此文件类型。”
我应该在每个.vue 文件中添加<style lang="scss"> 吗？
@RoCk -D 代表 dev（在开发中）——它在 package.json 文件中列出了 devDependencies 下的指定依赖项，而不是 dependencies。这与使用--save-dev 相同，但输入时间更短。

【解决方案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>

【讨论】：

【解决方案3】：

在你的package.json 中添加这个scripts 并运行

"compile:sass": "node-sass 'your main scss file location' 'your compiled css file location' -w"

请确保node-sass 和sass-loader 已正确添加。

然后在你的 App.vue 文件中添加这个，然后运行

<style lang="scss">

    @import 'your compiled css file location';

</style>

这对我有用。

谢谢

【讨论】：