Каковы этапы использования пользовательской начальной загрузки SASS в проекте Vue CLI 3? - PullRequest
Новая
       62

Каковы этапы использования пользовательской начальной загрузки SASS в проекте Vue CLI 3?

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

Я пытаюсь изменить цвета темы «основной», «опасный», «информация» и т. Д. В моем проекте. Я использую bootstrap-vue. Я попытался изменить файл variables.sass в папке начальной загрузки в node_modules, но ничего не отражается. Я посмотрел на документацию на предмет их тематики, но, похоже, не могу понять это или понять, что мне следует делать. Их пример совсем не похож на проект scaffolded для CLI 4. Должен ли я создавать собственный sass-файл, устанавливать загрузчик sass и импортировать его?

main.js 

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import './assets/main.css';
import routes from './routes';


Vue.config.productionTip = false;
Vue.use(VueRouter);
Vue.use(BootstrapVue);

const router = new VueRouter({mode: 'history',routes});

new Vue({
  router,
  render: h => h(App)

}).$mount('#app')

Приложение. Vue 

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
}
</script>

<style lang="css">
@import 'assets/main.css';
@import 'assets/custom_scss.scss';
</style>

1 Ответ

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

Если вы создали свой проект с помощью vue-cli 3/4, вы можете сделать следующее. Создайте файл custom.scss и импортируйте в него стили начальной загрузки и начальной загрузки и настройте переменные перед импортом.

Затем импортируйте custom.scss в файл main.js вместе с bootstrap-vue

custom.scss 

$theme-colors: (
  "primary": black,
  "danger": blue
);

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

main.js 

import Vue from "vue";
import BootstrapVue from "bootstrap-vue";

import "../assets/scss/config.scss";
Vue.use(BootstrapVue);

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

Еще одно замечание: вам никогда не следует настраивать какой-либо код внутри node_modules, поскольку эти файлы должны быть в состоянииудалил и снова загрузил, не ломая ничего.

...