如何在将编译的 Vue.JS 中添加全局 scss 文件? [英] How do I add a global scss file in Vue.JS that will compile?

问题描述

我正在尝试在我的 VueJS 项目中导入一个 scss 文件，然后它将在其中编译，从而能够与我的项目一起使用.但是，我需要一些帮助，因为目前它只是错误.有没有办法做到这一点?请注意，我对 VueJS 很陌生，所以我只是在了解基础知识.

I am trying to import a scss file within my VueJS project, where it will then compile and thus be able to use with my project. However, I need some help, as at present it simply errors. Is there a way to do this? Please note, I am very new to VueJS so I'm just getting my head around the basics.

我在 src 文件夹中创建了一个名为 scss 的文件夹，其中包含我的 main.scss 文件.接下来在我的 Vue.JS 中，我有以下代码；

I created a folder called scss within my src folder, which contains my main.scss file. Next in my Vue.JS I have the following code;

<template>
  <div id="app">
    <Home></Home>
    <Primary></Primary>
    <Secondary></Secondary>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import Primary from './components/Primary.vue'
import Secondary from './components/Secondary.vue'

export default {
  name: 'app',
  components: {
    'Home': Home,
    'Primary': Primary,
    'Secondary': Secondary
  }
}

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/main.scss";
        `
      }
    }
  }
};

</script>

<style lang="scss">
#app {
    display:block;
}
</style>

<脚本>从 './components/Home.vue' 导入 Home从'./components/Primary.vue'导入主要从'./components/Secondary.vue'导入二级导出默认{名称:'应用'，成分: {'家':家，'主要':主要，中学":中学}}模块.出口 = {css:{加载器选项:{萨斯:{数据:`@import "@/scss/main.scss";`}}}};<style lang="scss">#应用程序 {显示:块；}</风格>

推荐答案

简单点就用这个技巧

1. 创建一个名为 vue.config.js 的文件(如果它不是在您创建项目时由 vue-cli 自动创建的)
2. 将这些代码添加到您创建的文件中

1. @ 表示 src dir 这意味着 @/assets 与 src/assets
2. 我假设您有 main.scss 文件，其中包含所有子 scss 文件，如果您想知道它是如何制作的，请查看 这里 使用它真的很酷
3. prependData 可能不起作用或抛出错误我使用这些的原因是因为我使用的是 sass-loader":^8.0.2".这里有一些有用的信息

<块引用>

• on sass-loader":^7.*.*" 尝试使用data
• 在sass-loader":^8.0.2" 尝试使用prependData
• on sass-loader":^9.0.0" 尝试使用 additionalData

• on "sass-loader": "^7.*.*" try to use data
• on "sass-loader": "^8.0.2" try to use prependData
• on "sass-loader": "^9.0.0" try to use additionalData

1. 之后停止服务器并再次运行它以加载我们在 vue.config.js 中所做的新配置
2. 如果您正在使用 vuetify 它可能会引发错误，因此请确保您将处理器名称与扩展名匹配，就像您有 .scss 文件一样将需要使用这些配置
1. after that stop server and run it again to load new configurations we made in vue.config.js
2. if you are working with vuetify it may throw an error, so make sure that you match the processor name with the extension, like if you have .scss files you will need to use these configs

scss: { // the change was made here (match the option name with file extension)
  prependData: `
    @import "@/assets/scss/main.scss";
  `
}

如果您使用 .sass 文件，请使用这些配置

if you are using .sass file use these configs

sass: { //the change was made here (match the option name with file extension)
  prependData: `
    @import "@/assets/scss/main.sass";
  `
}

这篇关于如何在将编译的 Vue.JS 中添加全局 scss 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！