标签: css-modules

使用SASS时出现以下错误map-get.

ERROR in ./src/special.scss
Module build failed: ModuleBuildError: Module build failed: Unknown word (11:14)

   9 |
  10 | @mixin mediaquery($name) {
> 11 |     @media #{map-get($breakpoints, $name)} {
     |              ^
  12 |         @content;
  13 |     }
  14 | }

这只发生在我同时使用sass-loader和另一个加载器时.

我首先认为这是由PostCSS Loader引起的,但似乎是sass-loading导致问题而且在使用时不会改变scss css-modules.

我已经创建了一个示例代表来说明问题:https://github.com/tiemevanveen/sass-css-components-fail-example.

您可以使用不同的分支进行测试:

• master:CSS模块+ SASS
• postcss CSS模块+ SASS + PostCSS
• log-source:使用CSS模块+ SASS + 自定义源记录模块
• no-css-modules:SASS + 自定义源记录模块

只有第一个和最后一个分支运行没有错误.

我已经创建了日志源示例,以查看sass-loader返回的内容,看起来它并没有改变sass(但这也可能是我误解了加载器的工作方式).

没有css模块的另一个例子确实显示了正确的转换代码.. …

我有2个相同的组件，它们的样式略有不同，因此我想重用常见的样式，但又不想为它们使用全局CSS，如何实现呢？

import React from 'react';
import commonStylesfrom '../common/table.css';
import styles from '../uniquesStyles.css';

export default class Table extends React.Component {
   render () {
      return <div styleName='table'>
           <div styleName='something-diffrent'>
               <div styleName='cell'>A0</div>
               <div styleName='cell'>B0</div>
           </div>
      </div>;
   }
} 

//how can I combine 2 files here
export default CssMudule(Table, {styles, commonStyles})

所以，

我已经将家庭课程附加到身体上，如下所示：

 document.body.classList.add("home")

我想通过选择appContainer身体类的子元素

html body.home #appContainer { ..... }

这在没有CSS模块的情况下有效，但是想知道如何在CSS模块中实现。谢谢

我想知道如何完成以下工作。我使用蚂蚁设计框架，我用CSS模块捆绑在一起反应项目。

我所希望做的是选择基于使用CSS-模块产生一个父类的div这就是一些蚂蚁类。

目前，我有这个心不是哪个正确的：

.container
    flex-grow: 1 !important

.container
    \:global &.ant-layout-sider-collapsed
        .anticon
            font-size: 16px
            margin-left: 8px
        .nav-text
            display: none
        .ant-menu-submenu-vertical > .ant-menu-submenu-title:after
            display: none

这将产生以下：

.Navigation__container___1S9AX {
  flex-grow: 1 !important; }

.container.ant-layout-sider-collapsed .anticon {
  font-size: 16px;
  margin-left: 8px; }

.container.ant-layout-sider-collapsed .nav-text {
  display: none; }

.container.ant-layout-sider-collapsed .ant-menu-submenu-vertical > .ant-menu-submenu-title:after {
  display: none; 

我想要得到的是：

.Navigation__container___1S9AX {
  flex-grow: 1 !important; }

.Navigation__container___1S9AX.ant-layout-sider-collapsed .anticon {
  font-size: 16px;
  margin-left: 8px; }

.Navigation__container___1S9AX.ant-layout-sider-collapsed .nav-text {
  display: none; }

.Navigation__container___1S9AX.ant-layout-sider-collapsed .ant-menu-submenu-vertical > .ant-menu-submenu-title:after {
  display: none; 

感谢帮助，我尝试在Google搜索中搜索有关如何在CSS模块中工作的更多信息，但找不到太多信息。

我第一次使用 React 和 Webpack 尝试 CSS Modules，我遇到了至少三种实现它的方法：

1. css加载器
2. react-css-modules
3. babel-plugin-react-css-modules

我去babel-plugin-react-css-modules是为了平衡代码的简单性和性能，除了一件事之外，一切似乎都运行良好：我的第 3 方库（Bootstrap 和 Font Awesome）也包含在 CSS Modules 转换中。

<NavLink to="/about" styleName="navigation-button"></NavLink>

上面分配了一个正确转换className的NavLink. 但是，span内部需要引用全局样式才能呈现图标。

<span className="fa fa-info" />

上面的跨度没有分配一个className预期的转换，但我的捆绑样式表没有这些 CSS 类，因为它们被转换成其他东西，以模拟本地范围。

以下是我.babelrc要激活的文件中的内容babel-plugin-react-css-modules：

{
  "presets": ["env", "react"],
  "plugins": [
    ["react-css-modules", {
      "generateScopedName": "[name]__[local]___[hash:base64:5]",
      "filetypes": {
        ".less": {
          "syntax": "postcss-less"
        }
      }
    }]
  ]
}

在我的 Webpack 配置中，下面是配置css-loader转换的部分：

{
    test: /\.(less|css)$/,
    exclude: /node_modules/,
    use: extractCSS.extract({
        fallback: …

我正在使用本地范围限定我的 css 文件

modules: true,
localIdentName: "[name]__[local]_[hash:base64:5]"

在 webpack.config.dev 和 prod.js 中。我可以使用我为组件定义的样式，使用来自“./Component.css”的导入样式。现在我正在尝试使用 react-select 第三方组件。现在该组件具有我想要使用的预定义样式。要使用它，我按如下方式导入样式

导入'反应选择/dist/react-select.css'

但是样式没有被应用。如何为导入的组件启用预定义的样式。

例如我想给这个按钮添加 margin-top

import classes from 'button.module.css';
        <Button 
          type="submit"
          variant="contained"
          color="primary"
          fullWidth
          disabled={this.props.isLoading}
          className={classes.Button}
        >
          {this.props.isLoading ? <CircularProgress size={20}/> : 'SIGN IN'}
        </Button>

在 button.module.css 文件中

.Button {
  margin-top: 15px;
}

是否可以使用此方法而不是像官方 material-ui 页面中的指令那样覆盖？

我尝试在我的项目中使用 css 模块。我正在使用最新的 Create React App 和 react-scripts 版本 2.1.8。在文档中，它说我可以添加 CSS 模块，而且我不必执行弹出脚本。

我试图以同样的方式做，但我的样式是空的，类是未定义的。这是我的组件之一的代码：

import React, { Component } from 'react';
import styles from './Catalog.css';

class Catalog extends Component{

render() {
    console.log('styles.catalog '+ styles.catalog); //returns: styles.catalog undefined.
    return (
      <div className={styles.catalog}> //returns: <div>
        ...
      </div>
    )
}

目录.css：

.catalog {
  min-width: 800px;
}

问题

我正在尝试从.vue文件访问 SCSS 文件中定义的变量。该项目正在使用 vue-cli。

根据Vue 的文档：

“Vue CLI 项目支持 PostCSS、CSS 模块和预处理器，包括 Sass、Less 和 Stylus。”

但是，如果我创建一个variables.css带有名为 的变量的文件variable，并尝试在脚本中导入它，variable则找不到该文件。

样式/variables.module.css

$variable: 'foo';

:export {
  variable: $variable
}

应用程序

$variable: 'foo';

:export {
  variable: $variable
}

<style module>然而，在同一个 vue 文件的标签内导入 variables.css 文件确实有效。

应用程序

<script>
import variables from "./styles/variables.module.scss";
export default {
  name: "App",
  methods: {},
  computed: {
    variable() {
      console.log(variables);  // Object {}
      return variables.variable || "not found";
    }
  }
};
</script> …

如何在 Nextjs 中编辑Webpack 配置中的localIdentName字段，css-loader以便我可以散列/隐藏/混淆 css 类名？

下面的例子来自纽约时报。注意类名：