我尝试在Laravel-Mix中使用Css-Modules。
我通过laravel-mix-react-css-modules中的npm配置安装它（mix）。但是有一个小问题，即css模块的样式在<style>标签内加载为<head>标签。
要解决这个问题并正确加载样式，我需要安装和配置extract-text-webpack-plugin到我的mix.config。
首先我安装了extract-plugin 4.0.0-alpha.0的alpha版本
在我尝试在我的webpack.mix.js中配置它之后
const mix = require('laravel-mix');
let webpack = require('webpack');
require('laravel-mix-react-css-modules');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
mix.react('resources/js/app.js', 'public/js')
.reactCSSModules('[name]__[local]___[hash:base64:5]')
.sass('resources/sass/main.scss', 'public/css')
.version();
mix.webpackConfig({
entry: {
vendor: [
'react',
'lodash',
'jquery',
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ["commons", "vendor"],
filename: 'js/[name].js',
minChunks: 2
}),
],
module: {
rules: [
{
test: /\.(pdf|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
loader: 'file-loader?name=[name].[ext]?[hash]'
},
// --- CONFIG FOR EXTRACT-TEXT-WEBPACK-PLUGIN ----
{
test: /\.s[ac]ss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use : [
{
loader : 'css-loader',
},
{
loader : 'sass-loader',
}
]
})
}
]
}
});
但这不起作用。
请帮忙..
根据插件的作者，laravel-mix-react-css-modules似乎与Laravel Mix 4不完全兼容：https://github.com/leinelissen/laravel-mix-react-css-modules/issues/3