我对使用 vue-cli 项目的 Webpack 2 中的 css 编译顺序有疑问。
在 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
还有我的 webpack 2 配置和 vue-cli
{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
}
如何调整正确的导入样式顺序?
最佳答案
您需要重新订购 imports
在你的main.js
, 因为它是唯一影响 <style>
顺序的东西结果 DOM 中的标记:
import 'skeleton-css/css/skeleton.css'
import Vue from 'vue'
import App from './App'
import router from './router'
现在skeleton.css
排在第一位,其他一切都会排在它之后。
关于javascript - 如何在 Vuejs 中使用 webpack 更正 css 编译顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43628609/