在Vue中，我們可以使用CSS預處理器來編寫樣式，例如SASS或Less。當我們在Vue中使用這些預處理器時，它們會被編譯為普通的CSS，并通過Webpack打包成單個文件。但是，我們需要確保CSS文件的正確順序，以確保樣式被正確地應用到我們的應用中。

Vue可以通過webpack的ExtractTextPlugin插件來提取CSS，并將它們合并到單個文件中。此插件會在Webpack編譯階段將CSS抽離出來，然后在HTML文件中使用link標簽引用這個CSS文件。

//webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
module: {
rules: [
//...其他規則...
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
//...其他插件...
new ExtractTextPlugin('styles.css')
]
}

在這個配置中，我們使用ExtractTextPlugin來抽離CSS，并將它們保存在名為styles.css的文件中。在Vue組件中，我們可以像這樣引用CSS：

當我們在Vue組件中編寫CSS時，我們需要確保CSS根據其優先級正確地應用到DOM元素上。Vue使用CSS scoped選項可以解決這個問題。

使用scoped選項，我們可以將CSS限制在當前組件的范圍內。在運行時，Vue會自動為每個組件生成一個唯一的屬性來包裝CSS樣式，以確保它們只適用于當前組件。

在Vue中，我們還可以將CSS預處理器與scoped選項一起使用：

在這個例子中，我們使用了SASS預處理器，并將scoped選項應用到我們的CSS樣式中。

總結來說，Vue中的CSS打包順序非常重要。我們需要使用webpack的ExtractTextPlugin插件來確保CSS正確地應用，同時使用scoped選項來確保CSS只適用于當前組件。通過這些技術，我們可以在Vue應用中有效地編寫CSS代碼。