在 Vue 中包含基本/全局样式的最佳方法

【问题标题】：Best method of including base/global styles in Vue在 Vue 中包含基本/全局样式的最佳方法
【发布时间】：2020-02-03 03:36:45
【问题描述】：

在 Vue 中添加基本/全局样式时，最好在我的 main.js 中要求它们吗？

import Vue from 'vue';
import App from './App.vue';
import store from './store/';

require('./assets/scss/main.scss');

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

还是将它们导入我的App.vue 更好？

<style lang="scss">

    @import 'src/assets/scss/main.scss';

</style>

【问题讨论】：

标签： vue.js vue-cli vue-cli-3

【解决方案1】：

在 App.vue 和 main.js 中导入没有区别，只是不要忘记 App.vue 中的样式标签不能有属性范围，否则导入将不起作用，我个人更喜欢在 main .js，但使用 vue-cli 3 恕我直言，这种方法要好得多：

vue.config.js

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}

PS：别忘了在vue中，导入模块时，可以使用别名@映射到文件的/src文件夹中。

在我的一个项目中，我在 main.js 中有这个导入 import '@/assets/scss/index.scss';

欲了解更多信息：https://cli.vuejs.org/guide/css.html

【讨论】：