标签: css-modules

我想在我的项目中使用.scss（bulid与react和typescript），所以我使用typings-for-css-modules-loaderand 。css-loadersass-loader

当我时npm run dev，我收到此错误：

./src/Common.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

.common {
^
      Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"

我.scss喜欢这样：

.common {
  height: 100px
}

我的 wepack.config 是：

module.exports = {
    mode: 'development',
    entry: [
        'webpack-dev-server/client',
        path.resolve(root, 'src/index.tsx')
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        publicPath: '/',
        port: 8080,
        historyApiFallback: true
    },
    resolve: {
        extensions: [".ts", …

最近我开始使用 CSS 模块来使用 NextJS。为了消除重复，我想在每个样式表中自动导入带有混合、变量等的部分。

使用 GatsbyJS，我发现如何在项目的每个样式表中自动导入一些特定的 SASS 部分。设置看起来像这样：

{
  resolve: `gatsby-plugin-sass`,
  options: {
  data: '@import "_reset.scss", "_typography.scss", "_mixins.scss", "_extends.scss", "_themes.scss";',
  includePaths: [
    'src/styles/partials',
    ],
  },
},

现在我的 next.settings.js 看起来像这样：

const path = require("path");
const withSass = require("@zeit/next-sass");

const partials = [
  "_reset.scss",
  "_variables.scss",
  "_themes.scss",
  "_typography.scss",
  "_mixins.scss",
  "_extends.scss",
];

module.exports = withSass({

  cssModules: true,

  webpack: config => {
    config.resolve.alias["components"] = path.join(__dirname, "components");
    return config;
  },

});

如果可能的话，如何在每个样式表中自动包含部分内容？

问题解决，感谢@eric-tan的回复：

所有部分都导入到一个“_utilty.scss”部分中，该部分包含在 sassLoaderOptions 中： -> data：导入部分本身；-> includePaths：导入的部分所在的位置。

const path = require("path");
const withSass = …

编辑：接受的答案帮助我解决了问题。这是正确的，所以我接受了。但我正在导入包含标签的模块body，但没有使用它。

import styles from "./App.module.css"; //Includes a body tag

styles代码中没有使用任何地方，所以我认为 WebPack 没有包含它。如果我对该模块做了任何事情，则包含 body 标签并且它可以工作。<div className={styles.anything}>允许body包含 CSS。

正如回答者在评论中所说，这可能是由于 Typescript 造成的。

我曾经create-react-app制作过一个应用程序。我在我的组件中使用 CSS 模块。我试图弄清楚如何使用 CSS 模块使页面的整体背景具有不同的颜色。

我想应用background-color: #121212;到整个背景。

我正在尝试找出如何应用该样式，现在看来需要将其应用于标签body。

应用于的任何样式App.tsx仅影响该组件占用的容器（背景仅在组件底部着色App，其下方为白色）

现在index.css包含

body {
  ...
  background-color: #121212;
}

这很好用。我想使用模块，但我不知道如何导入该样式来工作。

index.tsx我将在哪里导入使用 Webpack创建的文件的样式create-react-app。

ReactDOM.render(<App />, document.getElementById('root'));

我正在将 Material UI 与 React 应用程序一起使用。对于通用样式，我只是简单地使用全局主题覆盖。但根据上下文有一些特定的规则，为此我想使用 css 模块。是否可以访问 css 模块内的主题？

我在 Material UI 文档中没有找到任何有关此内容的信息。也尝试用 google 搜索它，但是太多人在尝试使用 CSS 模块覆盖 MaterialUI 规则时遇到特殊性问题。

我正在将我的项目中的全局 SASS 迁移到 SCSS 模块中，该项目混合了全局 scss 和某种自定义的类似引导程序的框架。

我在应用程序中到处都有需要重构的全局样式引用

我的目标是跨 CSS 模块共享样式以重用主题、按钮等。 不幸的是，CSS 模块的“组合”功能无法编译 SASS。

这似乎是一个已知问题：

https://github.com/facebook/create-react-app/issues/7596

跨 CSS 模块快速引用共享 .scss 类的最佳策略是什么？

我有 main.scss，我在其中加载全局应用程序中使用的文件：

    :global {
      @import './button';
    }

在 sass/_button.scss 中：

    .btn {
      font-family: $baseFont;
      font-size: $text--m;
      font-weight: normal;
      text-align: center;
      outline: none;
      white-space: nowrap;
      padding: $padding--xs $padding--m;
      color: var(--white);
      background-color: var(--dark-blue);
      border: 1px solid var(--sky-blue-dark);
      border-radius: 4px;
      transition: all 100ms, color 100ms;
      box-shadow: 2px 3px 6px 0 var(--black-half);
      cursor: pointer;

在我的 Header.jsx 组件中

    <div className={styles.popContainer}>
            <button …

在 React 组件中将（自定义）CSS 模块与 Bootstrap结合的最佳方式是什么？我使用 Bootstrap CDN 来获取样式并在组件内使用它们。如何使用连接到组件的CSS 模块（例如）应用自定义样式？换句话说，如何覆盖 Bootstrap 的默认样式？假设以下是我的代码：.nav-link

import React from "react";
import styles from "./Navbar.module.css";

function Navbar() {
   return (
      <nav className="navbar navbar-expand-lg">
         <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav ml-auto">
               <li className="nav-item">
                  <a className="nav-link" href="#">Home</a>
               </li>
               <li className="nav-item">
                  <a className="nav-link" href="#">About</a>
               </li>
            </ul>
         </div>
      </nav>
   );
}

export default Navbar;

.Navbar {
   background-color: green;
}

<nav className={`navbar navbar-expand-lg ${styles.Navbar}`}>