vue"这些相关模块未找到"当使用scss文件

Question

我正在尝试在我的Vue应用程序中使用引导主题。不幸的是，引导主题没有Vue的参考实现。所以我需要自己配置一切。

我想做的是，我想使用Vue主题提供的scss文件。所以我的App.vue组件非常简单：

<template>
  <div id="app">

  </div>
</template>

<style lang="scss">
  @import "@/assets/base.scss";
</style>

"base.scss"文件包含导入所有依赖项。因此，当我使用"npm run service"运行我的Vue应用程序时，我得到以下错误：

错误编译失败，有10个错误

未找到此依赖项：

• -！.../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1！.../node_modules/vue-loader/lib/loaders/Style PostLoader.js！.../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2！typicons.font/src/font/typicons.css/node_modules/cs s-loader/dist/cjs.js??ref--8-oneOf-1-1！./node_modules/vue-loader/lib/loaders/Style PostLoader.js！./node_modules/postcss-loader/src？Ref--8-oneof-1-2！./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3！./node_modules/cache-loader/dist/cjs.js??ref--0-0！./node_modules/vue-loader/lib？？Vue-loader-选项！./src/App.vue?vue

要安装它，可以运行：npm install--save-/节点模块/css加载程序/dist/cjs。js？？参考——1-1中的8-1/node_模块/vue加载程序/lib/loaders/stylePostLoader。js/节点\u模块/postss加载器/src/index。js？？参考-1-2中的8-1！打字员。font/src/font/typicons。css

未找到这些相关模块：

• /组件/图标/线性图标/线性图标免费。eot输入/节点模块/css加载程序/dist/cjs。js？？参考-8-oneOf-1-1/node_模块/vue加载程序/lib/loaders/stylePostLoader。js/节点_模块/postss加载器/src？？参考号--8-oneOf-1-2/节点单元模块/sass加载器/dist/cjs。js？？参考号--8-oneOf-1-3/节点单元模块/缓存加载程序/dist/cjs。js？？ref--0-0/节点_模块/vue加载程序/lib？？vue加载程序选项/src/App。vue？vue

引用的文件存在于“@/assets/components/…”中目录但我的问题是，我不知道如何为组件设置相对路径（例如“@/assets”）搜索。此外，“base.scss”文件中没有变量可以调整以设置相对路径。我也不想修改“base.scss”文件，因为它来自主题。我不知道怎么解决这个问题。我已经尝试在vue中设置相应的网页包链。配置。没有任何成功：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('fonts')
      .test(/\.(ttf|otf|eot|woff|woff2)$/)
      .use('file-loader')
      .loader('file-loader')
      .tap(options => {
        options = {
          name: '@/assets/[path][name].[ext]'
        }
        return options
      })
      .end()
}

我希望任何人都能帮助解决这个问题：-）

Answer 1

我最终通过简单地导入“main.js”文件中的“base.scss”并使用它来解决这个问题：

import theme from '@/assets/base.scss'
Vue.use(theme)