SCSS/SASS 文件不适用于电子 nuxt答案

【问题标题】：SCSS/SASS files doesn't work with electron nuxtSCSS/SASS 文件不适用于电子 nuxt
【发布时间】：2021-02-26 09:20:36
【问题描述】：

我不知道如何解决这个问题，标题和脚本标签只是在电子应用程序中呈现。我已经尝试了很多东西，但没有任何效果。这是屏幕截图。顺便说一句，我正在使用这个模板https://github.com/saltyshiomix/nuxtron。如果我排除 scss 文件，它可以工作。但我需要使用 scss。我之前已经添加了 node-sass 和 sass-loader。如何解决这个问题？谢谢。

nuxt.config.js 文件

export default {
  // ssr: false,
  head: {
    title: 'this is broken app',
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "description",
        name: "description",
        content: process.env.npm_package_description || "it has been drive me crazy like days"
      }
    ],
    link: [
      {
        rel: "stylesheet",
        href:
          "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,800;1,400&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap"
      }
    ]
  },
  loading: { color: "#F4841A" },
  css: [
    "~/assets/scss/main.scss"
  ],
  plugins: [
    // {src: '~/plugins/element.js', mode: 'client'},
  ],
  buildModules: [
    // '@nuxtjs/fontawesome',
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    // baseURL: process.env.AUTH_API,
    retry: { retries: 3 }
    // proxy: true
  },
  build: {
    extend: (config) => {
      config.target = 'electron-renderer';
    },
  },
}

scss 文件

* {
  transition: all 0.15s ease-in-out;
  display: block;
  background-color: #f8f9fa;
}

html,
body {
  font-family: "Open Sans", "Verdana", sans-serif;
  line-height: 1.4;
  margin: 0px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

项目结构

【问题讨论】：

您的捆绑器是否配置为使用您的 sass-loader？
@Deniz 我在哪里配置这个？我找不到任何像 electron-vue 一样的 webpack 配置 js 文件。

标签： vue.js electron nuxt.js node-sass sass-loader

【解决方案1】：

奇怪的是，我创建了一个新项目，同样的错误，一遍又一遍，现在它工作了。我认为在 nuxt.config.js 中导入和配置 @nuxtjs/fontawesome 插件存在一些问题，但这很奇怪。无论如何，当它起作用时，它起作用了，对吧？ :D

【讨论】：