Question

我正在使用VueJs 2.5。*

我使用以下main.js加载组件：

import './assets/sass/paper-dashboard.scss'
import './assets/sass/element_variables.scss'
import './assets/sass/demo.scss'
...
import Test from './components/Test.vue'
...
Vue.component('vue-test', Test)
var vm = new Vue({
    el: '.vue-wrap',
    components: { Test },
})
window.vm = vm;

我的页面HTML：

<div class="vue-wrap"><vue-test></vue-test></div>

我正在使用自定义模板：https://demos.creative-tim.com/vue-paper-dashboard/

问题是使用的节点模块中的css / js没有加载到我的HTML中。仅加载“模板”标签之间的html组件。组件内联css也未加载。

加载组件时如何从页面中的节点模块加载css / js？

我应该如何编辑webpack配置，以使其从节点模块加载所有css / js？单独或组合在我的app.css或app.js文件中。

编辑

我找到了一个丑陋的解决方案。如果将.scss导入组件中，则css将加载到生成的app.css中。在我的Test.vue中，我添加了：

import '../assets/sass/paper-dashboard.scss'
import '../assets/sass/element_variables.scss'
import '../assets/sass/demo.scss'

是否有一个选项可以自动从main.js文件中加载所有这些文件，而不是将它们分别加载到我单独使用的每个组件中？

Answer 1

SCSS可以导入与JavaScript相同的文件。因此，您可以在index.scss文件夹中创建1个文件/assets/sass（或重用demo.scss）。

// assets/sass/demo.scss

@import "element_variables";
@import "paper-dashboard";

...

// main.js 

import './assets/sass/demo.scss'

尚未加载VueJs组件节点模块CSS / JS

1 个答案: