如何在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>

推荐答案

使用简单技巧即可简化

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

1. create a file called vue.config.js (if it was not auto-created by vue-cli when you were creating your project)
2. add these code to your created file

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

1. @ 表示 src dir，这意味着 @/assets 与 src/assets
2. 我假设您有一个 main.scss 文件，如果您想知道它是如何制作的，请在其中包括所有子subsss文件，请看一下.这是一些有用的信息

1. the @ means src dir this means that @/assets is the same as src/assets
2. I assume that you have the main.scss file, where you include all of you sub scss files if you want to know how it is made, take a look here it is really cool to work with it
3. prependData may not work or throw an error the reason why I used these is because I am using "sass-loader": "^8.0.2". here are some useful information

• 在"sass-loader"上:"^ 7.*.*" 尝试使用 data
• 在"sass-loader":"^ 8.0.2" 中尝试使用 prependData
• 在"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屋！