как импортировать в компонент vue глобальную таблицу стилей? - PullRequest
Новая
       47

как импортировать в компонент vue глобальную таблицу стилей?

0 голосов
/ 04 августа 2020

Я начинаю свой первый проект в VueJS и, следуя документации и руководствам, я хотел создать глобальную таблицу стилей, чтобы использовать одни и те же стили в разных компонентах. Я установил загрузчик s css и создал свою таблицу стилей 

$mainFont: 'PoppinsRegular, Arial';
$mainFontSemiBold: 'PoppinsSemiBold, Arial';
$mainFontItalic: 'PoppinsRegularItalic, Arial';

$primaryColor: #fff;
$secondaryColor: #dce0e6;
$tertiaryColor: #f0f4f7;
$quaternaryColor: #233240;
$quinaryColor: #0e5fa4;
$senaryColor: #14a30f;
$septenaryColor: #cd3c2d;
$octonaryColor: #6C757D;
$undenaryColor: #7e848c;
$duodenaryColor: #19b4c2;

Я импортировал эту таблицу стилей в main. js, как указано в документации, пробуя два разных способа 

import Vue from 'vue'
import App from './App.vue'
import './assets/scss/_variables.scss'

// this is the second way I've tested// require('./assets/scss/_variables.scss')

Vue.config.productionTip = false

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

и после импорта в основную. js Я изменил в своем 'домашнем' компоненте заголовок раздела стилей и импортировал один из цветов, объявленных в моей таблице стилей. 

<style lang='scss' rel='./assets/scss/_variables'>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: $septenaryColor;
}
</style>

Нет сомневаюсь, что я делаю что-то не так, потому что консоль выдает ошибку о том, что она не распознает ссылку на цвет в моих стилях

«Ошибка сборки модуля (из ./node_modules/sass-loader/dist/cjs. js): SassError: Неопределенная переменная: «$ septenaryColor». В строке 56 файла src / components / HelloWorld. vue

color: $ septenaryColor ;

--------- ^ "

Тот, кто может помочь мне и заставить меня увидеть ошибку моих путей. Заранее большое спасибо за вашу помощь и время

1 Ответ

1 голос
/ 04 августа 2020

Для этого вам нужно изменить vue.config.js. 

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/style/index.scss"; // path to file with your global styles
        `
      }
    }
  }
};

Тогда все стили из этого файла будут доступны из каждого компонента. Подробнее об этом вы можете узнать здесь: Глобально загрузить SASS в Vue. js Приложения

...