Vue-cli导入相对scss不适用于供应商**外部** librairies **样式文件**

Vue-cli（旧语法）导入相对scss资产不适用于供应商 external librairies in style files ：

• 导入项目相对scss（在src中）总是正常的 .

• 导入外部相对scss（在node_modules中）在标记内是可以的 .

• 在scss文件 NOK 中导入外部相对scss（在node_modules中） .

如果我采用这个版本的vue和@ vue-cli：

packadge.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"
  },

我的相关链接没有任何问题 inside 我的应用程序，但如果我导入 externals 像buefy或bulma，在样式文件中，我有问题 .

Basic Reproduction :

• 安装@ vue-cli @（npm remove vue-cli; npm remove -g vue-cli; npm install -g @ vue / cli）

• 我创建了一个基本项目（vue create relative-css-demo）

• 安装bulma＆buefy（npm install bulma buefy）

• 我使用bulma import创建基本颜色资源：

src / assets / vars / colors.scss

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

• 在单独的scss文件中设置App样式：

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;
}

And you have the bug :

错误./src/App.scss?vue&type=style&index=0&lang=scss中的1个错误编译失败错误模块构建失败（来自/home/awa/Projets/node_modules/sass-loader/lib/loader.js）： @import“../../../node_modules/bulma”; ^要导入的文件未找到或不可读：../../../ node_modules / bulma . 父样式表：/ home / awa / awa / Projets / vues-templates / simple-relative-css-中的/home/awa/Projets/vues-templates/simple-relative-css-demo/src/assets/vars/colors.scss- demo / src / assets / vars / colors.scss（第75行，第1列）@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader ?? REF！ - 8- oneOf-1-1 ./ node_modules / VUE装载机/ LIB /装载机/ stylePostLoader.js ./ node_modules / postcss装载机/ 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＆type = style＆index = 0＆lang = scss 4：14-310 14：3-18：5 14：310-18：4 15：22-318 @ ./src/App.scss?vue&type=style&index=0&lang=scss @ ./src/App.vue @ ./src/main . js @ multi（webpack）-dev-server / client？http：// localhost：8080 / sockjs-node（webpack）/hot/dev-server.js ./src/main.js

但是如果我在样式标签内导入颜色就行了 . 即使我在App.scss中导入我自己的另一个资产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;
}

DONE在268ms内成功编译