css - 在使用 scss 的 Vuejs 应用程序中包含 node_modules css

Question

我已将我的应用程序部署到 aws 并且我看到应用程序呈现正常，但同步融合控件未正确呈现。谷歌浏览器控制台没有显示任何错误。该应用程序在我的本地机器上正确呈现。

为了解决这个问题，建议我将import '@syncfusion/**/styles/material.css'单个 vue 组件中的语句移动到 App.vue（如此处所述）。然而，我得到一个“ Failed to resolve loader: sass-loader, You may need to install it”错误（应用程序已经安装了 node-sass、sass-loader）。

我应该如何在我的应用程序中包含 css 文件和 scss 文件？

之前：词汇表.vue：

<script>
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-vue-inputs/styles/material.css';

包.json：

"devDependencies": {
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
}

vue.config.js：

module.exports = {
  publicPath: '/',
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ],
  configureWebpack: {
    devtool: 'source-map',
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

应用程序.Vue：

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
</style>

标签： cssvue.jswebpacksassej2-syncfusion

Answer 1

删除 npm 包并重新安装它们再次解决了这个问题。