Реагируйте - Используйте Bootstrap глобально с модулями CSS - PullRequest
Новая
       35

Реагируйте - Используйте Bootstrap глобально с модулями CSS

0 голосов
/ 12 сентября 2018

Довольно новый, чтобы реагировать и все такое, поэтому мне нужна помощь здесь.Я недавно добавил плагин https://github.com/gajus/babel-plugin-react-css-modules в свой проект.После некоторых неприятностей я заставил его работать, так что теперь я могу использовать свои локальные css файлы с моими компонентами.Пока все хорошо.

Не хотелось бы добавлять загрузчик для всего приложения.Он работал до того, как я добавил плагин css-modules ...

Вот соответствующие части моего кода (я думаю ... если я что-то упустил, дайте мне знать):

index.js (точка входа в мое приложение): 

import 'bootstrap/dist/css/bootstrap.min.css';
...

.babelrc: 

{
    "presets": [
        "react"
    ],
    "plugins": [
      ["react-css-modules", {
        "exclude": "node_modules"
      }]
    ]
}

webpack.config.js : 

/* webpack.config.js */

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'eval',

  entry: [
    path.resolve('src/index.js'),
  ],

  output: {
    path: path.resolve('build'),
    filename: 'static/js/bundle.js',
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve('src'),
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]', // Add naming scheme
            },
          },
        ],
      },

    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve('src/index.html'),
    }),
  ],
}

Любой совет приветствуется.Спасибо за ваше время.

О, кстати: я также хотел бы представить scss для моего приложения, я пока не знаю, как это сделать (не проводил никаких исследований, но если кто-то из вас знает,как это сделать, и я могу это объяснить, я был бы очень признателен ... не знаю, если это большое изменение).

Редактировать: я совершенно забыл добавить свой компонент: 

import React, { Component } from "react";
import { Switch, Route, withRouter } from "react-router-dom";
import './style.css';

export default class HomeContainer extends Component {
  constructor() {

    super();
  }
  /* Test */
  render() {
    return (
      <div styleName="title">
        This woorks (styleprops from "title" are appliced"
        <button type="button" className="btn btn-primary">Primary</button> // Doesn't style the button :(
      </div>
    );
  }
}

1 Ответ

0 голосов
/ 12 сентября 2018

Я нашел решение сам.Опубликуем здесь, может кому-нибудь понадобится однажды:

Определите два правила в конфигурации веб-пакета: 

{
              test: /\.css$/,
              exclude: /node_modules/,
              use: [
                'style-loader',
                {
                  loader: 'css-loader',
                  options: {
                    importLoaders: 2,
                    modules: true,
                    localIdentName: '[path]___[name]__[local]___[hash:base64:5]', // Add naming scheme
                  },
                },
              ],
            },

            // Second CSS Loader, including node_modules, allowing to load bootstrap globally over the whole project.
            {
              test: /\.css$/,
              include: /node_modules/,
              use: ['style-loader', 'css-loader']
            }
...