导入相对scss资产的Vue-cli(旧语法)不适用于样式文件中的供应商外部库;
如果我采用这个版本的vue和@ vue-cli:
的package.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等外部,我就有问题了。
基本复制:
SRC /资产/瓦尔/ colors.scss
@import "../../../node_modules/bulma/sass/utilities/_all";
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&type=style&index=0&lang=scss中的错误
模块构建失败(来自/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-loader /lib/loaders/stylePostLoader.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&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;
}
完成编译成功于268ms
事实上,我确实使用了新的导入符号:
符号\ @import“../../../node_modules/bulma”已弃用,正确的符号是\ @import“~bulma / sass / utilities / _all”;
你可以看到生成的vue项目的简单例子与外部bulma和buefy css导入那里:https://github.com/vuejs-templates/webpack