Лучший способ включения базовых / глобальных стилей в Vue - PullRequest
Новая
       58

Лучший способ включения базовых / глобальных стилей в Vue

0 голосов
/ 04 октября 2019

При добавлении базовых / глобальных стилей в 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>

1 Ответ

1 голос
/ 04 октября 2019

Нет никакой разницы при импорте в App.vue или в main.js, просто не забывайте, что тег стиля в App.vue не должен иметь атрибут объема, иначе импорт не будет работать, лично я предпочитаю делать внутри основного.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

...