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

Posted 2023-02-22

【中文标题】SCSS/SASS 文件不适用于电子 nuxt

【英文标题】：SCSS/SASS files doesn't work with electron nuxt

【发布时间】：2021-02-26 09:20:36

【问题描述】：

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

nuxt.config.js 文件

export default 
  // s-s-r: 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 文件。

【参考方案1】：

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