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

将此添加到 scripts 和 运行

中的 package.json

"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>

这对我有用。

谢谢

Answer 3

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

Sass

npm install -D sass-loader sass

yarn add --dev sass-loader sass

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

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

参考latest documentation here