Сборка React Prod не загружается css, но сборка Dev работает нормально - PullRequest
Новая
       8

Сборка React Prod не загружается css, но сборка Dev работает нормально

1 голос
/ 17 февраля 2020

Я дергаю себя за это.
Проблема в том, что когда я создаю свое приложение реагирования с флагом prod, оно не загружает файл css. но тот же css отлично работает при сборке с флагом dev.

Вот мой пакет. json

{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development NODE_OPTIONS='--max-old-space-size=8192' node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch --watch-poll",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "license-check": "license-checker --exclude 'Apache-2.0, BSD, CC0-1.0, CC-BY-3.0, CC-BY-4.0, ISC, MIT, Public Domain, Unlicense, WTFPL, Zlib'",
    "production": "cross-env NODE_ENV=production NODE_OPTIONS='--max-old-space-size=8192' node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "test": "jest"
  },
  "devDependencies": {
    // usual stuff
  },
  "dependencies": {
    // usual stuff
  }
}

, и это мой laravel -микс для веб-пакета 

const mix = require('laravel-mix');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.ts('resources/assets/js/index.tsx', 'public/js')
    .webpackConfig(smp.wrap({
        resolve: {
            extensions: [".js", ".jsx", ".ts", ".tsx"]
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: "ts-loader",
                    options: {
                        transpileOnly: true,
                        experimentalWatchApi: true,
                    },
                    exclude: /node_modules/
                }
            ]
        },
        plugins: [
            new HardSourceWebpackPlugin(),
            new ForkTsCheckerWebpackPlugin(),
        ],
    }))
    .extract(['react'])
    .sourceMaps()  
    .version();

и это мой файл index.tsx 

import React from 'react'
import ReactDOM from 'react-dom'
import './css/reset.css'
import App from './App'

import { Provider } from 'react-redux'

import { createBrowserHistory } from 'history'
import { ConnectedRouter } from 'connected-react-router'

const history = createBrowserHistory()



ReactDOM.render(

        <Provider store={store}>
            <GlobalStyles />
            <ConnectedRouter history={history}>
                <App />
            </ConnectedRouter>
        </Provider>

    document.getElementById('root'),
)

РЕДАКТИРОВАТЬ: на всякий случай это файл .babelr c 

{
  "plugins": [
    "babel-plugin-styled-components",
    [
      "babel-plugin-import",
      {
        "libraryName": "@material-ui/core",
        "libraryDirectory": "esm",
        "camel2DashComponentName": false
      },
      "core"
    ],
    [
      "babel-plugin-import",
      {
        "libraryName": "@material-ui/icons",
        "libraryDirectory": "esm",
        "camel2DashComponentName": false
      },
      "icons"
    ],
    [
      "babel-plugin-transform-imports",
      {
        "@material-ui/core": {
          "transform": "@material-ui/core/esm/${member}",
          "preventFullImport": true
        },
        "@material-ui/icons": {
          "transform": "@material-ui/icons/esm/${member}",
          "preventFullImport": true
        }
      }
    ]
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ]
  ]
}

css, который не загружен - 

import './css/reset.css'

Любая идея, почему сброс. css работает при использовании npm run dev, но останавливает загрузку при сборке с npm run prod?

...