我有一个问题的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"
}]
}
如何调整正确的导入样式顺序?
发布于 2017-04-26 08: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
是第一位的,其他一切都会紧随其后。
https://stackoverflow.com/questions/43628609
复制相似问题