导入到 app.js 中的组件的 SCSS 样式正在应用于 app.js 中的所有组件

Question

我正在使用 react-router 并将样式和组件导入我的 app.js。问题是，在说登录中应用的任何样式都以某种方式也应用于 Home、Item 和 Bag。查看 chrome 中的源代码，它显示了每当我转到任何页面时正在加载的所有 css 文件。我正在使用 webpack，我认为这可能是问题所在，但我不知道是什么原因造成的。任何帮助将不胜感激！

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

您需要 css 模块 来为特定组件限定样式。因为css 样式本质上是全局。

快速提问：

你在你的 webpack 配置中使用mini-css-extract-plugin 吗？如果是这样，当您通过 webpack 构建应用程序时，所有 js 中的样式（导入的 scss 文件）都会被拉入 单个文件并注入进入 index.html 页面。

首先，您需要将 scss 文件 转换为 css 模块，然后执行以下操作即可获得所需的内容。

link 应该可以帮助您将 scss 文件转换为 css 模块。

示例：

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

假设您已将 scss 转换为 css 模块。让我们看一个例子。

例如：page1.scss、page2.scss 到 styles.css

我建议根据您的需要拆分样式。让我们看一个上面代码的例子。

例如：vendor.css（包含 bootstrap 和 general 样式）和 ma​​in.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 插件页面的示例。

说明：

上面的配置会创建两个文件，一个用于vendor.css，一个用于ma​​in.css。像这样，您可以为您的路线创建n 数量的样式并相应地使用它。

希望对您有所帮助！

Answer 2

在ReactJS 中，css 不是component 范围。 css 是全局范围。因此，如果您在任何组件中添加 css 文件，那么它将应用于整个应用程序。

如果您希望 css 成为组件范围，那么您可以使用“CSS 模块”

该项目使用 [name].module.css 文件命名约定支持 CSS 模块和常规样式表。 CSS Modules 允许通过自动创建格式为 [filename]_[classname]__[hash] 的唯一类名来确定 CSS 的范围。

你可以阅读更多关于这个here