Vue cli导入相对SCS不适用于样式文件中的供应商**外部**库****

Question

Vue cli（的旧语法）导入相对scss资产不适用于样式文件中的供应商外部库：

• 导入项目相对SCS（在src中）总是可以的

如果我使用此版本的vue和@vue cli：

包装。json

 "dependencies": {
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-beta.15",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
    "@vue/cli-service": "^3.0.0-beta.15",
    "buefy": "^0.6.6",
    "bulma": "^0.7.1",
    "vue-template-compiler": "^2.5.16"
  },

我在我的应用程序中没有任何相关链接的问题，但是如果我在样式文件中导入buefy或bulma等外部内容，我就有问题了。

基本复制：

>

安装@vue-cli@（npm删除vue-cli； npm删除-g vue-cli； npm安装-g@vue/cli）

我创建一个基本项目（vue创建相对-css-demo）

安装灯泡

我使用bulma导入创建基本颜色资源：

src/资产/vars/colors.scss

@import "../../../node_modules/bulma/sass/utilities/_all";

• 在单独的scss文件中设置应用程序样式：

SRC/App.vue

<style lang="scss" src="./App.scss"></style>

src/App。scss

@import './assets/vars/colors.scss'
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

你有一个bug：

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

错误/src/App。scss？vue

模块构建失败（从 /home/awa/Projets/node_modules/sass-loader/lib/loader.js）：

@导入".../.../.../node_modules/bulma"；^要导入的文件找不到或不可读：.../.../.../node_modules/bulma.父样式表： /home/awa/Projets/vues-templates/simple-relative-css-demo/src/assets/vars/colors.scss /home/awa/Projets/vues-templates/simple-relative-css-demo/src/assets/vars/colors.scss（第75行，第1栏）

node_modulesvue风格的加载器Ref--8-oneof-1-0！./node_modules/css-loader？？Ref--8-oneof-1-1！./node_modules/vue-loader/lib/loaders/Style PostLoader.js！./node_modules/postcss-loader/lib？？Ref--8-oneof-1-2！/home/awa/Projets/node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3！./src/App.scss?vue

但是如果我在样式标签中导入颜色，它就可以工作。即使我导入我自己的另一个资产scss文件在App.scss它是确定的...

SRC/App.vue

<style lang="scss" src="./App.scss">
  @import './assets/vars/colors.scss'
</style>

src/App。scss

@import './assets/vars/noexternals.scss'
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

在268ms内成功编译完成

Answer 1

事实上，我确实使用了新的导入符号：

不推荐使用符号\@import“../../../node_modules/bulma”，正确的符号是\@import“~bulma/sass/utilities/_all”；

您可以在此处看到生成的vue项目的简单示例，其中包含外部bulma和buefy css导入：https://github.com/vuejs-templates/webpack