Не удается загрузить загрузчик Webpack при импорте.css в приложение Reaction_on_rails?

Question

Я пытаюсь использовать react-datetime на моем react-on-rails приложение. Чтобы заставить datetime работать из коробки, мне нужно импортировать CSS, упомянутый на их странице GH.

В моем приложении я копирую / вставляю CSS в файл с именем DateTime.css:

...
import DateTime from 'react-datetime';
import '../../schedules/stylesheets/DateTime.css';
...

export default class AddDate extends React.Component {

Но это дает мне эту ошибку:

VM45976:1 Uncaught Error: Module parse failed: /Users/some/path/to/my/project/App/components/schedules/stylesheets/DateTime.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .rdt {
|   position: relative;
| }

Кажется, что загрузчик CSS не работает. Я попробовал это на чистом приложении реакции (create-react-app) и это сработало. Это сломалось, когда я сделал это внутри response_on_rails.

Это мой конфиг веб-пакета (стандартная готовая реакция:

const webpack = require('webpack');
const { resolve } = require('path');

const ManifestPlugin = require('webpack-manifest-plugin');
const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');

const configPath = resolve('..', 'config');
const { devBuild, manifest, webpackOutputPath, webpackPublicOutputDir } =
  webpackConfigLoader(configPath);

const config = {

  context: resolve(__dirname),

  entry: {
    'webpack-bundle': [
      'es5-shim/es5-shim',
      'es5-shim/es5-sham',
      'babel-polyfill',
      './app/bundles/App/startup/registration',
    ],
  },

  output: {
    // Name comes from the entry section.
    filename: '[name]-[hash].js',

    // Leading slash is necessary
    publicPath: `/${webpackPublicOutputDir}`,
    path: webpackOutputPath,
  },

  resolve: {
    extensions: ['.js', '.jsx'],
  },

  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
      DEBUG: false,
    }),
    new ManifestPlugin({ fileName: manifest, writeToFileEmit: true }),
  ],

  module: {
    rules: [
      {
        test: require.resolve('react'),
        use: {
          loader: 'imports-loader',
          options: {
            shim: 'es5-shim/es5-shim',
            sham: 'es5-shim/es5-sham',
          },
        },
      },


    {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: 'css-loader',
        exclude: /node_modules/,
      },
    ],
        ],
      },
    };

module.exports = config;

if (devBuild) {
  console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
  module.exports.devtool = 'eval-source-map';
} else {
  console.log('Webpack production build for Rails'); // eslint-disable-line no-console
}

Я очень новичок в веб-пакете, и не знаю, как мне добавить загрузчики, чтобы он работал, как я могу применить DateTime.css файл, к которому я должен быть применен react-datetime?

РЕДАКТИРОВАТЬ: добавлен css-загрузчик (также обновлен веб-пакет выше). Больше не жалуюсь, что у меня нет правильного загрузчика, но CSS не работает.

{
    test: /\.jsx?$/,
    use: 'babel-loader',
    exclude: /node_modules/,
  },
  {
    test: /\.css$/,
    use: 'css-loader',
    exclude: /node_modules/,
  },
],

Answer 1

Есть 2 концептуально разных подхода к этому.

1. Использование CSS-модулей. Таким образом, ваш CSS будет в конечном итоге связан с вашим JS, и как только веб-пакет загрузит этот модуль / связку JS, он автоматически добавит элемент стиля CSS в голову. В моем проекте у меня есть это правило, чтобы сделать именно это (обратите внимание, что мы используем оба css-loader а также style-loader):

{
    test: /\.css$/,
    use: ['style-loader', {
        loader: 'css-loader',
        options: {
            modules: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]'
        }
    }]
}

Подробнее о css-загрузчике modules по этой ссылке.

2. Используя ExtractTextPlugin. Таким образом, весь ваш CSS будет извлечен в отдельный файл. Конфигурация требует 2 вещей: плагин и конфигурация загрузчиков, созданные плагином:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Add this to your webpack plugins array
new ExtractTextPlugin('styles.css')

И добавьте это к своим правилам:

{
    test: /\.css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader']
    })
}

Это создаст один styles.css файл и поместите весь CSS, который вы импортируете из JS в этот файл.