在 Laravel 混合中使用提取文本 Webpack 插件

Question

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

我通过 npm 配置在 mix 中安装它 (laravel-mix-react-css-modules)。但是有一个小问题 css 模块的样式加载为 <style> 标签在 <head> 标签内。

要解决此问题并正确加载样式，我需要为我的 mix.config.

安装和配置 extract-text-webpack-plugin

首先我安装了alpha版本的extract-plugin 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 混合中使用提取文本 Webpack 插件

Use Extract Text Webpack Plugin in Laravel Mix

webpack

laravel-mix