Webpack MiniCssExtractPlugin с Material-UI - порядок ввода - PullRequest
Новая
       8

Webpack MiniCssExtractPlugin с Material-UI - порядок ввода

0 голосов
/ 18 октября 2019

Я пытаюсь выучить React и у меня есть вопрос, основанный на стилях с React. Я использую фреймворк Material-UI, и у этого фреймворка есть несколько стилей для каждого компонента. Теперь я хочу перезаписать их своей собственной таблицей стилей.

Так, например, Login component Я создал файлы Login.js и login.modules.scss. Последний содержит мои собственные стили, которые я затем импортирую в мой Login component файл.

Однако, когда я строю свой проект, веб-пакет вставляет мою собственную таблицу стилей до стилей материала. Поэтому я не могу перезаписать некоторые вещи. Как я могу убедиться, что моя таблица стилей после Material-UI.

Чтобы привести пример:

login.modules.scss 

.paper{
    color: red;
}

Затем в Login.js Я добавляю .paper из таблицы стилей в свойство className. 

import React from "react";
import classes from "./login.modules.scss";
import Paper from "@material-ui/core/Card";
export default function Login() {
  return <Paper className={classes.paper}>Paper</Paper>;
}

Затем, когда я его строю, яполучить вывод, где моя таблица стилей находится над стилями материалов по умолчанию.

enter image description here

Если бы я мог как-то их переключить, то это работает. Но как мне это сделать?

Мой webpack.config.js содержит это: 

  {
      test: /\.scss$/,
      use: [
         {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: "development" }
         },
         { loader: "css-loader", options: { importLoaders: 2, modules: true } },
         { loader: "postcss-loader" },
         { loader: "sass-loader" }
      ]
   }
...