Стили S CSS, импортированные в компоненты приложения. js применяются ко всем компонентам приложения. js

Question

Я использую реагирующий маршрутизатор и импортирую стили и компоненты в мое приложение. js. Проблема заключается в том, что любые стили, применяемые, скажем, Login, так или иначе применяются и к Home, Item и Bag. Глядя на источник в chrome, он показывает все файлы css, загружаемые всякий раз, когда я go загружаю на любую из страниц. Я использую веб-пакет, и я думаю, что это может быть проблемой, но я понятия не имею, что в нем вызывает это. Любая помощь будет принята с благодарностью!

import '../../styles/styles.scss';
import '../../styles/generalStyle.scss';
import 'bootstrap/dist/js/bootstrap';

import {
  Route,
  Switch,
} from 'react-router-dom';

import NotFound from './NotFound';

import Login from '../Login/Login';
import Home from '../Home/Home';
import Item from '../Item/Item';
import Bag from '../Bag/Bag';

export default function App() {
  return (
    <>
      <main>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/login" component={Login} />
          <Route path="/item/:name" component={Item} />
          <Route path="/bag" component={Bag} />
          <Route component={NotFound} />
        </Switch>
      </main>
    </>
  );
}```

Answer 1

В ReactJS css не является component областью действия. css является глобальной областью действия. поэтому, если вы добавите файл css в любой компонент, он будет применяться ко всему приложению.

Если вы хотите, чтобы css был областью действия компонента, вы можете использовать 'CSS Модули'

Этот проект поддерживает CSS Модули наряду с обычными таблицами стилей с использованием [name] .module. css соглашение об именах файлов. CSS Модули позволяют определять область действия CSS, автоматически создавая уникальное имя класса в формате [имя_файла] _ [имя_класса] __ [хэш].

Вы можете прочитать больше об этом здесь

Answer 2

Вам нужно css модулей * от 1002 * до область применения стилей для конкретного компонента. Потому что css стилей имеют глобальный характер.

Быстрый вопрос :

Используете ли вы mini - css -extract-plugin в вашей конфигурации веб-пакета? Если это так, когда вы создаете приложение через веб-пакет, все стили в js ( импортированные s css файлы ) извлекаются в один файл и вводится в индекс. html стр.

Сначала вам нужно преобразовать s css файлы в css модулей и сделать ниже, вы получите то, что вам нужно.

Эта ссылка должна помочь вам преобразовать файлы s css в css модули.

Пример :

{
    test: /\.css$/i,
    loader: 'css-loader',
    options: {
      modules: true, // this one make existing scss to css modules
    },
  },

Предположим, что Вы конвертировали модули s css в css. Давайте рассмотрим пример.

Например: page1.s css, page2.s css до стилей. css

Я бы предложил разделить стили в соответствии с вашими потребностями. Давайте рассмотрим пример для приведенного выше кода.

Например: vendor. css (содержит bootstrap и общие стили) и main. css (содержит стили компонентов )

Пример: webpack.config. js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}

module.exports = {
  entry: {
    vendor: path.resolve(__dirname, 'src/vendor'),
    main: path.resolve(__dirname, 'src/main'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'foo',
          test: (m, c, entry = 'vendor') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
        main: {
          name: 'bar',
          test: (m, c, entry = 'main') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};

Над файлом приведен пример, взятый непосредственно со страницы mini- css -extract-plugin .

Объяснение:

Над конфигурацией создаст два файла, один для поставщика. css и один для main. css. Таким образом, вы можете создать n количество стилей для ваших маршрутов и использовать его соответственно.

Надеюсь, эта помощь!