使用Vue開發(fā)SPA時昔脯，如果想在組件中用 CSS Modules 來替代 scoped 控制CSS作用域廉白，只需要在Webpack的 vue-loader 中寫上相關(guān)配置即可猴蹂。然而在基于Laravel的項目中就沒有那么容易了晕讲。Laravel默認(rèn)采用了 laravel-mix 作為構(gòu)建工具瓢省，不太方便自己定制配置勤婚。
根據(jù)官網(wǎng)文檔的說明，首先嘗試用 mix.webpackConfig() 來覆蓋相應(yīng)的配置項：
mix.webpackConfig({
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
cssModules : {
localIdentName: '[name]-[hash:base64:5]',
camelCase: true,
}
}
}
]
}
});
然而這并不起作用！
于是想到直接去修改 laravel-mix 的源碼型雳，在 node_modules\laravel-mix\src\builder\webpack-rules.js 文件中找到 vue-loader 的rules纠俭，在 options 中添加一項 CSS module 的配置朴则，這次可以正常編譯運行了乌妒！
cssModules : {
localIdentName: '[name]-[hash:base64:5]',
camelCase: true,
}
這樣其實不是最佳的解決方案，畢竟修改了源碼，有沒有可能直接在 webpack.mix.js 中搞定呢席镀？
在Google搜索了一大圈也沒找到合理的方案，可能是這樣的需求比較少見屎篱。后來發(fā)現(xiàn)在該項目的 GitHub Issues 上有人遇到的類似的問題交播，終于在最后看到了解決方案秦士。由于Laravel 5.5默認(rèn)自帶的是 laravel-mix^1.0隧土，我們必須先升級到最新版本（我使用的是 v2.11.1）：
npm install laravel-mix@latest
接下去可以調(diào)用新增的 extend 方法來實現(xiàn)我們的需求曹傀，代碼如下：
mix.extend('cssModules', function(webpackConfig) {
webpackConfig.module.rules.forEach( module => {
if(module.loader !== 'vue-loader')
return;
module.options.cssModules = {
localIdentName: '[name]-[hash:base64:5]',
camelCase: true,
};
});
});
關(guān)于 Extending Mix 的詳細使用可以查看官方文檔
最后在編譯打包資源之前，調(diào)用我們自定義注冊的 cssModules 方法：
mix.cssModules()
.js('resources/assets/js/app.js', 'public/js')
.version();
大功告成炭剪！ 這下我們可以在Vue組件中使用 CSS Modules 的寫法了。同樣的方法也可以用于注入其它相關(guān)的配置错妖，如 vue-i18n，遇到相關(guān)需求的可以自行嘗試痴施。
