未加载 VueJs 组件节点模块 css/js

Posted 2023-02-22

【中文标题】未加载 VueJs 组件节点模块 css/js

【英文标题】：VueJs component node modules css/js not loaded

【发布时间】：2019-01-21 10:09:30

【问题描述】：

我正在使用 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 文件中加载所有这些，而不是在我单独使用的每个组件中加载它们？

【问题讨论】：

请添加 Test.vue 以及您在运行 webpack 的 CLI 中看到的任何错误。

我更新了我的答案，你可以看到我导入了一些 .scss 文件。我也在使用自定义模板：demos.creative-tim.com/vue-paper-dashboard。 Test.vue 是一个带有

【参考方案1】：

SCSS 可以像 javascript 一样导入文件。所以你可以在/assets/sass文件夹中创建1个文件index.scss（或重复使用demo.scss）。

// assets/sass/demo.scss

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

...

// main.js 

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