Question

我正在尝试在Vue应用程序中使用Bootstrap主题。不幸的是，Bootstrap主题没有Vue的参考实现。因此，我需要自行配置所有内容。

我想做的是，我想使用Vue中主题提供的scss文件。所以我的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

未找到这些相关模块：

./node_modules/css-loader/dist/cjs.js中的
./ components / icons / linearicons / Linearicons-Free.eot？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＆
./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue中的
./ components / icons / linearicons / Linearicons-Free.svg？w118d -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＆
./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue中的
./ components / icons / linearicons / Linearicons-Free.ttf？w118d -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＆
./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue中的
./ components / icons / linearicons / Linearicons-Free.woff2？w118d -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＆
./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue中的
./ components / icons / linearicons / Linearicons-Free.woff？w118d -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＆
./node_modules/css-loader/dist/cjs.js中的
./ components / slick-carousel / slick / ajax-loader.gif ?? 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＆
./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib中的
./ utils / images / logo-inverse.png /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＆
./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders中的
./ utils / images / logo.png /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

我终于解决了这个问题，只需将“ base.scss”导入“ main.js”文件并使用它即可：

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

Vue在使用scss文件

1 个答案: