Radium не создает CSS с помощью Webpack 4 - PullRequest
0 голосов
/ 20 марта 2019

Я пытаюсь обновить Webpack с v1 до v4. Я вижу созданный файл CSS, но он не имеет встроенного CSS из Radium.

Вот мой конфиг вебпак

'use strict';
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var ManifestPlugin = require('webpack-manifest-plugin');
var paths = require('./paths');
var getClientEnvironment = require('./env');
var publicPath = paths.servedPath;
var shouldUseRelativeAssetPaths = publicPath === './';
var publicUrl = publicPath.slice(0, -1);
var env = getClientEnvironment(publicUrl);
const cssFilename = 'static/css/react-bundle.css';
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const createConfig = (name, entry, output) => {
return {
    name,
    stats: 'verbose',
    mode: process.env.NODE_ENV,
    devtool: 'cheap-module-eval-source-map',
    entry,
    output,
    resolve: {
        extensions: ['.js', '.json', '.jsx', '.css', '.scss'],
        alias: {
            'react-native': 'react-native-web',
            radium: require.resolve("radium/index"),
        },
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'eslint-loader',
                exclude: /node_modules/,
                include: [paths.appSrc, paths.modulesSrc, paths.commonSrc],
                options: {
                    failOnWarning: false,
                    failOnError: false,
                    emitError: false,
                    emitWarning: true,
                },
                enforce: 'pre',
            },
            {
                exclude: [
                    /\.html$/,
                    /\.(js|jsx)$/,
                    /\.css$/,
                    /\.json$/,
                    /\.svg$/
                ],
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: 'static/media/[name].[hash:8].[ext]',
                        },
                    }
                ]
            },{
                test: /\.(js|jsx)$/,
                include: [paths.appSrc, paths.modulesSrc, paths.commonSrc],
                use: [{
                    loader: 'babel-loader',
                }]
            },{
                test: /\.json$/,
                use: [{
                    loader: 'json-loader',
                }]
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'static/media/[name].[hash:8].[ext]',
                        },
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {loader: 'css-loader', options: {importLoaders: 1}},
                ],
            },
        ],
    },
    plugins: [
        new webpack.DefinePlugin(env.stringified),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: cssFilename,
            chunkFilename: "[id].css"
        }),
        new ManifestPlugin({
            fileName: 'asset-manifest.json',
        }),
        //new WebpackNotifierPlugin({ alwaysNotify: true, })
    ],
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
    },

    optimization: {
        minimizer: [
            new TerserPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
                terserOptions: {}
            }),
        ],
    }
};
};

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

{
    "name": "InvestorView",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "concurrently 'npm run minifyjson' 'npm run build-dev'",
      "start-win": "concurrently \"npm run minifyjson-win\" \"npm run build-dev\"",
      "build": "concurrently 'npm run minifyjson' 'npm run build-prod'",
      "build-win": "concurrently \"npm run minifyjson-win\" \"npm run build-prod\"",
      "build-dev": "node --max_old_space_size=8000 --trace-deprecation scripts/build-dev.js  --mode development",
      "build-prod": "node scripts/build.js",
      "minifyjson": "malta '#./core/api/config/malta-config.json'",
      "minifyjson-win": "malta #./core/api/config/malta-config.json",
      "coverage": "cross-env NODE_ENV=test nyc report --reporter=lcov --reporter=text",
      "test": "cross-env NODE_ENV=test nyc mocha test/util/browser.js test/util/ignoreFileExtensions.js \"core/{api,constants,react_components,reducers,selectors,utils}/**/*.spec.{js,jsx}\" \"{modules,common}/**/*.spec.{js,jsx}\" --recursive",
      "test-watch": "cross-env NODE_ENV=test mocha -w -R min test/util/browser.js test/util/ignoreFileExtensions.js \"core/{api,constants,react_components,reducers,selectors,utils}/**/*.spec.{js,jsx}\" \"{modules,common}/**/*.spec.{js,jsx}\" --recursive"
},
    "nyc": {
    "sourceMap": false,
      "instrument": false,
      "check-coverage": true,
      "branches": 33,
      "lines": 52,
      "reporter": [
        "lcov",
        "text-summary"
    ],
      "require": [
        "./test/util/browser.js",
        "./test/util/ignoreFileExtensions.js"
    ],
      "extension": [
        ".jsx"
    ]
},
    "dependencies": {
    "accounting": "0.4.1",
      "babel-polyfill": "6.26.0",
      "classnames": "2.2.6",
      "date-fns": "1.29.0",
      "deepmerge": "1.3.2",
      "dompurify": "1.0.5",
      "es6-template-regex": "1.0.0",
      "file-saver": "1.3.8",
      "flexbox-react": "4.4.0",
      "fuse.js": "3.2.1",
      "hashids": "1.1.4",
      "lodash": "4.17.10",
      "md5": "2.2.1",
      "moment": "2.22.2",
      "prop-types": "15.6.2",
      "rc-slider": "8.6.1",
      "react": "15.4.2",
      "react-bootstrap": "0.32.1",
      "react-css": "0.0.2",
      "react-dom": "15.4.2",
      "react-helmet": "5.2.0",
      "react-joyride": "2.0.3",
      "react-jsonschema-form": "0.49.0",
      "react-jss": "8.6.1",
      "react-keydown": "1.9.7",
      "react-modal": "3.5.1",
      "react-motion": "0.5.2",
      "react-motion-ui-pack": "0.10.3",
      "react-player": "1.6.4",
      "react-redux": "5.0.7",
      "react-responsive": "5.0.0",
      "react-responsive-carousel": "3.1.41",
      "react-router-dom": "4.3.1",
      "react-signature-canvas": "1.0.1",
      "react-simple-maps": "0.12.1",
      "recharts": "1.1.0",
      "redux": "3.6.0",
      "redux-logger": "3.0.6",
      "redux-saga": "0.16.0",
      "redux-thunk": "2.3.0",
      "reselect": "3.0.1",
      "shortid": "2.2.12",
      "uniqid": "5.0.3",
      "url-search-params-polyfill": "4.0.1"
},
    "devDependencies": {
    "@babel/core": "^7.3.4",
      "@babel/plugin-proposal-decorators": "^7.3.0",
      "@babel/preset-env": "^7.3.4",
      "@babel/preset-react": "^7.0.0",
      "autoprefixer": "^6.7.2",
      "babel-core": "6.26.3",
      "babel-eslint": "10.0.1",
      "babel-jest": "24.5.0",
      "babel-loader": "8.0.5",
      "babel-plugin-transform-async-to-generator": "6.24.1",
      "babel-plugin-transform-decorators-legacy": "1.3.4",
      "babel-plugin-transform-react-remove-prop-types": "0.4.3",
      "babel-register": "^6.26.0",
      "babel-runtime": "6.20.0",
      "case-sensitive-paths-webpack-plugin": "1.1.4",
      "chai": "3.5.0",
      "chalk": "1.1.3",
      "concurrently": "^4.1.0",
      "connect-history-api-fallback": "1.3.0",
      "cross-env": "5.0.1",
      "cross-spawn": "4.0.2",
      "css-loader": "2.1.1",
      "cssnano": "^4.1.10",
      "detect-port": "1.0.1",
      "dotenv": "2.0.0",
      "enzyme": "2.8.2",
      "eslint": "^4.7.1",
      "eslint-loader": "^2.0.0",
      "eslint-plugin-class-methods-use-this-regexp": "0.1.0",
      "eslint-plugin-import": "2.7.0",
      "eslint-plugin-react": "7.4.0",
      "eslint-plugin-security": "1.4.0",
      "file-loader": "3.0.1",
      "fs-extra": "0.30.0",
      "html-webpack-plugin": "3.2.0",
      "http-proxy-middleware": "0.17.3",
      "jest": "18.1.0",
      "jsdom": "11.6.2",
      "json-loader": "0.5.7",
      "malta": "^3.9.3",
      "malta-json-minify": "^1.0.3",
      "mini-css-extract-plugin": "^0.5.0",
      "mocha": "3.2.0",
      "nyc": "11.3.0",
      "object-assign": "4.1.1",
      "postcss-cssnext": "^3.1.0",
      "postcss-import": "^12.0.1",
      "postcss-loader": "^3.0.0",
      "promise": "7.1.1",
      "prop-types": "^15.6.0",
      "radium": "0.25.1",
      "react-addons-test-utils": "15.4.2",
      "react-dev-utils": "0.5.2",
      "react-tooltip": "^3.10.0",
      "signature_pad": "^3.0.0-beta.3",
      "sinon": "2.1.0",
      "sinon-chai": "2.9.0",
      "style-loader": "0.23.1",
      "sugarss": "^2.0.0",
      "terser-webpack-plugin": "^1.2.3",
      "url-loader": "1.1.2",
      "webpack": "4.29.6",
      "webpack-bundle-size-analyzer": "3.0.0",
      "webpack-manifest-plugin": "2.0.4",
      "webpack-notifier": "1.7.0",
      "whatwg-fetch": "2.0.2"
},
    "postcss": {
    "parser": "sugarss",
      "map": false,
      "plugins": {
        "postcss-plugin": {}
    }
}
}

Я не уверен, что я здесь делаю неправильно. Для меня это выглядит так: мне нужно изменить использование Radium в соответствии с новой конфигурацией Webpack.

Я уже внес изменения в соответствии с документацией Radium, но безуспешно.

Кто-то еще сталкивался с такой же проблемой. Пожалуйста, дайте мне знать.

...