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

Question

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

Answer 1

在App.vue或main.js中导入没有什么区别，只是不要忘记App.vue中的style标签必须不具有属性范围，否则导入将无法进行，我个人更喜欢在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：别忘了在导入模块时，可以使用别名@映射到文件的/ src文件夹。

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

有关更多信息：https://cli.vuejs.org/guide/css.html