Как импортировать вендор CSS в JS

Question

Я создаю приложение React. Я хотел бы отделить свой собственный *.scss и продавец *.css файлы.

Я следовал инструкциям здесь и попробовал много "решений" там. Но я получаю сообщение об ошибке при импорте CSS в JSX, используя @import '.../vendor.css', Тем не менее, я не получаю никакой ошибки, и все CSS в комплекте bundle.css при импорте CSS в мой корневой файл SCSS.

Можете ли вы помочь мне?

---

Нет ошибки но не хочу

В /src/view/styles/styles.scss:

@import '~react-tippy/dist/tippy.css';
@import '~react-toastify/dist/ReactToastify.min.css';

Не работает

В src/components/App.jsx

import 'react-tippy/dist/tippy.css';

Пакеты:

"webpack": "^4.6.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",

webpack.config.js:

const path = require('path');
const ExtractText = require('extract-text-webpack-plugin');
const Clean = require('clean-webpack-plugin');
const Copy = require('copy-webpack-plugin');
const Uglify = require('uglifyjs-webpack-plugin');
const Externals = require('webpack-node-externals');

module.exports = (env) => {
  // settings
  const { mode, build } = env;
  const isProduction = mode === 'production';
  const isServer = build === 'server';
  const target = isServer ? 'node' : 'web';
  const buildPath = isServer ? 'build' : 'public';
  const entry = `./src/${build}/index`;
  const sourceMap = !isProduction;
  const minimize = isProduction;

  // plugins
  const clean = new Clean(buildPath);
  const copy = new Copy([{ from: './src/assets', to: `./` }]);
  const bundleCss = new ExtractText('bundle.css');
  const vendorCss = new ExtractText('vendor.css');
  const uglify = new Uglify();
  const plugins = [clean, copy, bundleCss, vendorCss];
  if (isProduction) plugins.push(uglify);

  console.log(`Webpack is running for ${build}/${mode}.`);

  // configuration
  return {
    mode,
    target,
    entry: ['babel-polyfill', entry],
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, buildPath),
      publicPath: '/'
    },
    resolve: { extensions: ['.js', '.jsx'] },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          use: { loader: 'babel-loader' },
          exclude: /node_modules/
        },
        {
          test: /\.css$/,
          use: vendorCss.extract({
            use: ['css-loader', 'postcss-loader']
          })
        },
        {
          test: /\.s?css$/,
          use: bundleCss.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
          })
        }
      ]
    },
    plugins,
    externals: isServer ? [Externals()] : undefined,
    devtool: isProduction ? 'source-map' : 'inline-source-map'
  };
};