使用 vue.js 显示 SCSS 样式的问题

Question

我正在创建一个 vue.js 网络应用程序，我想使用 SCSS 来帮助进行样式设置。我已经安装了npm i node-sass sass-loader，并在根级别创建了一个vue.config.js。在里面我有这一套

module.exports = {
 css: {
  loaderOptions: {
   scss: {
       additionalData: `@import "@/styles/global.scss";`
   }
  }
 }
};

---

这是SCSS的文件夹结构

在主styles 文件夹的每个子文件夹中，我都有一个_all.scss，然后为给定的子文件夹导入每个包含.scss 的文件。在global.scss 中，所有_all.scss 子文件夹中的文件都会被导入。

// styles/base/_all.scss
@import 'reset.scss';
@import 'variables.scss';

// global.scss
@import 'base/all';
@import 'components/all';

---

我的问题是我的网络应用程序没有加载任何.scss 文件或通过主global.scss 文件导入的样式。我没有收到任何构建错误，例如，如果我删除了 _variables.scss 文件，则会收到其他 .scss 文件无法访问声明的 scss 变量的错误。这意味着我的.scss 导入方法正在运行，但样式并没有以某种方式显示。

我是否必须使用每个 vue 组件 <style> 标记来完成所有样式设置，还是可以按照我现在的结构来做？

Answer 1

我不想弄乱 webpack 配置。

你也可以在 main.js 中导入你的样式

import '@/styles/global.scss';