Импортировать таблицы стилей библиотеки с модулями Babel-Plugin-React-Css- - PullRequest
Новая
       32

Импортировать таблицы стилей библиотеки с модулями Babel-Plugin-React-Css-

0 голосов
/ 04 июня 2018

Я пытаюсь включить CSS другой библиотеки для их компонента в мое собственное приложение.Для справки я пытаюсь использовать эту библиотеку таблиц данных: https://github.com/filipdanic/spicy-datatable.

В документации указано: Out of the box, spicy-datatable is bare-bones. Include this CSS starter file in your project to get the look from the demo. Edit it to suit your needs.

Я пытался импортировать таблицу стилей в верхней части компонента.что я строю так: import * as spicy from 'spicy-datatable/src/sample-styles.css'; в моем собственном файле компонента.Это не было в стиле.Я попытался поместить необработанный код в мой index.scss файл в моей папке assets/styles - не сработало.Я попытался поместить его в свой собственный файл стилей ./component.scss - не сработало.

В настоящее время я настроил их как: 

import * as styles from './component.scss';
import * as spicy from 'spicy-datatable/src/sample-styles.css';

и получаю сообщение об ошибке:

Module parse failed: Unexpected token (4:0) You may need an appropriate loader to handle this file type.

webpack.config.js

const dirNode = 'node_modules';
const dirApp = path.join(__dirname, 'client');
const dirAssets = path.join(__dirname, 'assets');

/**
 * Webpack Configuration
 */
module.exports = {
  entry: {
    vendor: ['lodash'],
    bundle: path.join(dirApp, 'index')
  },
  resolve: {
    modules: [dirNode, dirApp, dirAssets]
  },
  plugins: [],
  module: {
    rules: [
      // BABEL
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/,
        options: {
          compact: true
        }
      },
      // CSS / SASS
      {
        test: /\.(scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
            }
          },
          'sass-loader'
        ]
      },

      // IMAGES
      {
        test: /\.(jpe?g|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        }
      }
    ]
  }
};

.babelrc

"plugins": [
    [
      "react-css-modules",
      {
        "filetypes": {
          ".scss": {
            "syntax": "postcss-scss"
          }
        },
        "webpackHotModuleReloading": true
      }
    ]

Я не уверен, нужно ли мне что-то добавить для конкретной обработки .css файлов, я впервые работаю с модулями CSS.Я думал, что реагирующие css-модули сделали это, поэтому я не совсем уверен, почему файл CSS не загружается правильно.

Редактировать:

Отредактировал мой веб-пакет, добавив в него CSS: 

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

Ошибка исчезла, но стили по-прежнему не отображаются.

1 Ответ

0 голосов
/ 04 июня 2018

Не могли бы вы попробовать изменить ниже: 

import * as spicy from 'spicy-datatable/src/sample-styles.css';

на 

import from 'spicy-datatable/src/sample-styles.css';

Если вы используете CSS-модули, попробуйте ниже: 

import spicy from 'spicy-datatable/src/sample-styles.css';

, а затемиспользуйте стиль элемента JSX, как показано ниже: 

<h1 className={classes.<className in CSS here>}>

Я установил кодовую коробку с библиотекой spicy-datatable и импортировал стили и выглядит так, как они применяются.Стили находятся в файле «Hello.css» и импортируются в «index.js».

https://codesandbox.io/s/4j31xj3689

...