生产版本覆盖了我在 .css 节点中的样式答案

【问题标题】：Production build overrides my style in .css node生产版本覆盖了我在 .css 节点中的样式
【发布时间】：2020-01-13 00:34:44
【问题描述】：

我正在使用 style.css，其中有一些 CSS 样式，例如

.Sidebar-img-22 {

    width: 200px !important;

}

然后我打了电话

import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";

import AuthLayout from "layouts/Auth.jsx";
import RtlLayout from "layouts/RTL.jsx";
import AdminLayout from "layouts/Admin.jsx";

import css from "assets/css/style.css";

import "assets/scss/material-dashboard-pro-react.scss?v=1.5.0";

const hist = createBrowserHistory();

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/rtl" component={RtlLayout} />
      <Route path="/auth" component={AuthLayout} />
      <Route path="/admin" component={AdminLayout} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </Router>,
  document.getElementById("root")
);

当我在控制台中运行时

npm run build
serve -s build

我在这个 style.css 中的风格没有建立。也许我在错误的文件中有这个 CSS？

【问题讨论】：

请在package.json 中提到的build 脚本中发布，如果您使用的是webpack，请将webpack.js.org/loaders/css-loader 添加到webpack.config
我的 webpack.config.js 有问题我需要把它放在根目录或 webpack 模块目录吗？在 package.json 中没有提到 webpack。

标签： css node.js reactjs build dev-to-production

【解决方案1】：

你的根组件在哪里？你在里面导入了 style.css 吗？

【讨论】：

是的，适用于 npm start，但是当我这样做时，不使用 npm run build。一些想法？请...
你能显示你使用style.css的文件吗

【解决方案2】：

App.js

  import React from "react";
  import ReactDOM from "react-dom";
  import { createBrowserHistory } from "history";
  import { Router, Route, Switch, Redirect } from "react-router-dom";

  import AuthLayout from "./layouts/Auth.jsx";
  import RtlLayout from "./layouts/RTL.jsx";
  import AdminLayout from "./layouts/Admin.jsx";

  require("./assets/css/style.css");

  require("./assets/scss/material-dashboard-pro-react.scss?v=1.5.0");

  const hist = createBrowserHistory();

  ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/rtl" component={RtlLayout} />
      <Route path="/auth" component={AuthLayout} />
      <Route path="/admin" component={AdminLayout} />
      <Redirect from="/" to="/admin/dashboard" />
    </Switch>
  </Router>,
  document.getElementById("root")
  );

在项目中安装 sass-loader

$ npm install sass-loader node-sass --save-dev

将 sass-loader 更新为 webapck 捆绑

Webpack.config.js

module.exports = {
    // ... 
    module: {
        rules: [
           // ... 
            {
                test: /\.(css|scss|sass|sss)$/;,
                use: [
                    { loader: 'style-loader' },
                    {loader: 'css-loader'},
                    { loader: 'sass-loader' }
                ]
            },
        ]
    },
};

【讨论】：