Question

我尝试在Laravel-Mix中使用Css-Modules。

我通过laravel-mix-react-css-modules中的npm配置来安装（mix）。但是有一个小问题，就是css模块的样式以<style>标签的形式加载到<head>中标签。

要解决此问题并正确加载样式，我需要将extract-text-webpack-plugin安装并配置到我的 mix.config 。

首先，我安装解压插件的Alpha版本 4.0.0-alpha.0

尝试在 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',
                  }
               ]
           })
        }
    ]
}

}）;

但是这行不通。

请帮助。

Answer 1

似乎该插件的作者认为laravel-mix-react-css-modules尚未与Laravel Mix 4完全兼容：https://github.com/leinelissen/laravel-mix-react-css-modules/issues/3

在Laravel Mix中使用Extract Text Webpack插件

1 个答案: