如何在Vuejs中纠正与webpack的css编译顺序？
如何在Vuejs中纠正与webpack的css编译顺序？
提问于 2017-04-26 16:19:47
我有一个问题的css编译顺序在Webpack 2与vue-cli项目。
在main.js中，我导入了一个名为skeleton.css的css库文件。这包括<a>颜色样式。
import Vue from 'vue'
import App from './App'
import router from './router'
import 'skeleton-css/css/skeleton.css'在App.vue中，我按如下方式设置了<a>颜色
<style lang="scss">
a {
text-decoration: none;
color: #2c3e50;
}
</style>当我编译代码并打开chrome检查器时。我发现错误的顺序插入样式。
<style type="text/css">....</style> // App.vue inline style
<style type="text/css">....</style> // skeleton.css style和我的带vue-cli的webpack 2配置
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}如何调整正确的导入样式顺序？
回答 1
Stack Overflow用户
发布于 2017-04-26 16:25:27
您需要重新排序main.js中的imports，因为它是唯一会影响结果DOM中<style>标记顺序的东西：
import 'skeleton-css/css/skeleton.css'
import Vue from 'vue'
import App from './App'
import router from './router'现在skeleton.css是第一位的，其他一切都会紧随其后。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43628609
复制相关文章
相似问题
腾讯云开发者
