Реактивные стили не загружаются в реакции 16.8 - PullRequest
Новая
       77

Реактивные стили не загружаются в реакции 16.8

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

Инструменты:

React 16.8.3actstrap 7.1.0

Я следовал приведенным здесь инструкциям https://reactstrap.github.io/, но все еще получаю ошибки.Мне известно об этом решении на их странице github: 

{ test: /\.css$/, loader: 'style-loader!css-loader' }

, но этот файл конфигурации кажется устаревшим.Я получаю только эту ошибку: 

Module not found: Can't resolve 'style-loader!css-loader'

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

const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
  isEnvDevelopment && require.resolve('style-loader'),
  isEnvProduction && {
    loader: MiniCssExtractPlugin.loader,
    options: Object.assign(
      {},
      shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
    ),
  },
  {
    loader: 'style-loader!css-loader',
    options: cssOptions,
  },
  {
    // Options for PostCSS as we reference these options twice
    // Adds vendor prefixing based on your specified browser support in
    // package.json
    loader: require.resolve('postcss-loader'),
    options: {
      // Necessary for external CSS imports to work
      // https://github.com/facebook/create-react-app/issues/2677
      ident: 'postcss',
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
        }),
      ],
      sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
    },
  },
].filter(Boolean);

{
   test: cssRegex,
   exclude: cssModuleRegex,
   use: getStyleLoaders({
            importLoaders: 1,
            modules: true,
            localIdentName: '[name]__[local]__[hash:base64:5]',
            sourceMap: isEnvProduction
              ? shouldUseSourceMap
              : isEnvDevelopment,
          }),
          // Don't consider CSS imports dead code even if the
          // containing package claims to have no side effects.
          // Remove this when webpack adds a warning or an error for this.
          // See https://github.com/webpack/webpack/issues/6571
          sideEffects: true,
        }

1 Ответ

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

(у меня недостаточно репутации, чтобы добавить комментарий к вашему вопросу)

Что ж, я хотел включить модули CSS, поэтому я сделал это.Мне понадобилось время, чтобы разобраться в новой версии.после успешного извлечения просто отредактируйте файл webpack.config.js и добавьте две строки кода (проверьте код ниже) 

....
....
{
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,

            modules: true, // add this line 
            localIdentName: "[name]__[local]__[hash:base64:5]", // add this line too

            sourceMap: isEnvProduction
              ? shouldUseSourceMap
              : isEnvDevelopment
          }),
....
....

only edit webpack.config.js

еще несколько фотографий, как использовать загрузчики CSS:

my Layout.css file:

my layout.css file

my Layout.js file:

my layout.js file

...