Используйте Extract Text Webpack Plugin в Laravel Mix - PullRequest
Новая
       12

Используйте Extract Text Webpack Plugin в Laravel Mix

0 голосов
/ 10 февраля 2019

Я пытаюсь использовать Css-модули в Laravel-Mix.

Я устанавливаю его (laravel-mix-react-css-modules) через npm, настраиваю в mix. Но есть небольшая проблема в том, что стили модуля css загружаются как<style> тег внутри <head> тега.

Чтобы решить эту проблему и правильно загрузить стиль, мне нужно установить и настроить extract-text-webpack-plugin для моего mix.config .

Сначала я устанавливаю альфа-версию 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',
                  }
               ]
           })
        }
    ]
}

});

Но это не сработает.

Пожалуйста, помогите ..

1 Ответ

0 голосов
/ 28 февраля 2019

Кажется, по словам автора плагина, laravel-mix-реагировать-css-modules еще не полностью совместим с Laravel Mix 4: https://github.com/leinelissen/laravel-mix-react-css-modules/issues/3

...