我试着重写variables.scss,但是没起作用。

首先我这样引入KeenUI:

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

/* Notifications */
import VueAWN from "vue-awesome-notifications"
let options = {}
Vue.use(VueAWN, options)

/* KeenUI */
import KeenUI from 'keen-ui';
import 'keen-ui/dist/keen-ui.css';
// Here define components global options
Vue.use(KeenUI, {
    UiTooltip: { 
      position: 'top'
    },
    UiButton: {
      iconPosition: 'right'
    }
  }
)

/* Running Vue */
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  store,
  router,
  components: { App }
}).$mount('#app')

然后创建了src/assets/style/variables.scss:

$brand-primary-color: red;
$brand-accent-color: green;

最后修改vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/style/variables.scss";`
      }
    }
  },
  devServer: {
    host: '0.0.0.0',
    port: 80,
    disableHostCheck: true,
    hot: true,
    watchOptions: { 
      aggregateTimeout: 300, 
      poll: true 
    },
    proxy: {
      '^/api': {
        target: 'http://sanic_server:8080',
        ws: true,
        changeOrigin: true
      }
    }
  }
}
发布于 2021-01-09 09:47
共1个回答
CA
游客CaPZzK

如果你有重写variables,你需要引入组件源码,同时不需要引入CSS文件。

//import KeenUI from 'keen-ui';
//import 'keen-ui/dist/keen-ui.css';

import KeenUI from 'keen-ui/src/index.js';

回答问题
624 阅读
1 回答
0