使用scss文件时Vue“找不到这些相关模块”

Question

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

我想要做的是，我想在 Vue.js 中使用主题提供的 scss-files。所以我的 App.vue 组件非常简单：

<template>
  <div id="app">

  </div>
</template>

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

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

ERROR 编译失败，出现 10 个错误

未找到此依赖项：

• -!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.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/stylePostLoader.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-options!./src/App.vue?vue&type=style&index=1&lang=scss&

要安装它，你可以运行： npm install --save -!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules /postcss-loader/src/index.js??ref--8-oneOf-1-2!typicons.fo nt/src/font/typicons.css

未找到这些相关模块：

• ./components/icons/linearicons/Linearicons-Free.eot 在 ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader /lib/loaders/stylePostLoader.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-options!./src/App.vue?vue&type=style&index=1&lang=scss&
• ./components/icons/linearicons/Linearicons-Free.eot?w118d in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue -loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_mo dules/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-options!./src/App.vue?vue&type=style&index=1&lang=scss&
• ./components/icons/linearicons/Linearicons-Free.svg?w118d in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue -loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_mo dules/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-options!./src/App.vue?vue&type=style&index=1&lang=scss&
• ./components/icons/linearicons/Linearicons-Free.ttf?w118d in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue -loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_mo dules/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-options!./src/App.vue?vue&type=style&index=1&lang=scss&
• ./components/icons/linearicons/Linearicons-Free.woff2?w118d 在 ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue -loader/lib/loaders/stylePostLoader.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-options!./src/App.vue?vue&type=style&index=1&lang=scss&
• ./components/icons/linearicons/Linearicons-Free.woff?w118d in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue -loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_m odules/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-options!./src/App.vue?vue&type=style&index=1&lang=scss&
• ./components/slick-carousel/slick/ajax-loader.gif 在 ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue -loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sa ss-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-options!./src/App.vue?vue&type=style&index=1&lang=scss&
• ./utils/images/logo-inverse.png 在 ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib /loaders/stylePostLoader.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-options!./src/App.vue?vue&type=style&index=1&lang=scss&
• ./utils/images/logo.png 在 ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders /stylePostLoader.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-options!. /src/App.vue?vue&type=style&index=1&lang=scss& 来自 chokidar (C:) 的错误：错误：EBUSY：资源繁忙或锁定， lstat 'C:\hiberfil.sys'

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

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)