标签: babel-plugin-react-css-modules

问题

我正在尝试在我的 React 项目中使用babel-plugin-react-css-modules来获得比React CSS Modules更好的性能。

但是，这些样式没有正确应用。

原因

标签中的版本<style>用奇怪的连字符包裹，例如：

• 在标签中<style>：-components-Foo-___Foo__foo___1fcIZ-
• 关于 DOM 元素类名：components-Foo-___Foo__foo___1fcIZ

即使我们使用相同的localIdentName，生成的结果也与 DOM 元素上的 css 和 className 中的选择器不同。

（注意：在 babel-plugin-react-css-modules 中，是localIdentName硬 [path]___[name]__[local]___[hash:base64:5]编码的 options.generateScopedName）

知道为什么会有连字符包装器吗？

有关问题的完整描述,请参阅https://github.com/gajus/babel-plugin-react-css-modules/issues/162.

Git repo = https://github.com/basher/react-no-webpack

这是一个简单的POC/scaffold,用于没有Webpack或Gulp的React UI lib ,但它必须支持CSS Modules + Sass.

• 我只是想尝试使用Babel + Browserify.
• 并直接从"package.json"执行NPM脚本.

我有一个导入CSS文件的示例窗口小部件组件,另一个导入Sass文件的窗口小部件组件.解析CSS + Sass文件的内容时会发生错误 - 例如,转换程序不理解"." 在类选择器中.

这是具体的错误:

$ npm run watch

> react-no-webpack@1.0.0 watch C:\...path-to-project-folder...\react-no-webpack
> watchify ./src/index.js -o ./build/bundle.js -t babelify -v


C:\...path-to-project-folder...\react-no-webpack\src\lib\components\WidgetCSS\WidgetCSS.css:1
.widget {
^
ParseError: Unexpected token

编辑/更新:

我做了一些调查,并在react-css-modules repo中问了一个问题= https://github.com/gajus/react-css-modules/issues/268

我正在尝试开始使用react-css-modulesw/ babel-plugin-react-css-modules。目前我有一个运行 react的电子锻造应用程序。

我的.compilerc看起来如下：

{
  "env": {
    "development": {
      "application/javascript": {
        "presets": [
          ["env", { "targets": { "electron": "2.0.0" } }],
          "es2015", "stage-0", "react"
        ],
        "plugins": ["transform-decorators-legacy", "transform-runtime"],
        "sourceMaps": "inline"
      }
    },
    "production": {
      "application/javascript": {
        "presets": [
          ["env", { "targets": { "electron": "2.0.0" } }],
          "es2015", "stage-0", "react"
        ],
        "plugins": ["transform-decorators-legacy", "transform-runtime"],
        "sourceMaps": "none"
      }
    }
  }
}

我的理解.compilerc类似于.babelrc（我没有.babelrc文件），请参阅：electron-compile（electron-forge 使用的 - 我猜）

但是，.css …

我有一个通过插件使用 CSS 模块的组件babel-plugin-react-css-modules。

在组件生命周期的某些时刻，我希望能够通过直接访问 DOM 来计算它的新维度。

在我的 SCSS 样式表中，我有一个名为的类.full-width，我想将其应用于组件的 DOM 元素，以便进行计算，然后再次将其删除。

现在，由于添加类并稍后删除它不会影响组件或其状态，因此我想通过直接访问 DOM 来添加和删除类，而不是通过某种方式将其与组件的相关联。state。

如果我这样做，则会将this.DOMReference.classList.add('full-width');类full-width添加到其中，但我想添加该类的模块化版本，因为如果我这样做了，它将被应用styleName="full-width"（例如Component__full-width___Pjd10）

.full-width有没有办法在不进行全局声明的情况下做到这一点？

我可以用 来做到这一点吗react-css-modules？

我第一次使用 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: …

当同时使用 webpack 和 babel 时，需要配置两者才能使用 React CSS 模块。例如：

webpack.config.js将需要这样的规则：

{
  // Translates CSS into CommonJS modules
  loader: 'css-loader',
  options: {
    modules: {
      mode: "local",
      localIdentName: CSS_CLASS_NAME_PATTERN,
    },
  sourceMap: true
}

babel.config.js将需要一个像这样的插件：

[
  'react-css-modules',
  {
    generateScopedName: CSS_CLASS_NAME_PATTERN,
    filetypes: {
      '.scss': {
        syntax: 'postcss-scss',
        plugins: ['postcss-nested']
      }
    },
  }
]

为什么需要在两个地方配置 CSS 模块？两者如何合作？即按什么顺序发生什么？

反应和所有这些东西都很新，所以我需要一些帮助。我最近在我的项目中添加了https://github.com/gajus/babel-plugin-react-css-modules插件。经过一些麻烦，我让它工作了，所以我现在可以在我的组件中使用我的本地 css 文件。到现在为止还挺好。

不是我想为整个应用程序添加引导程序。在我添加 css-modules 插件之前它工作了......

这是我的代码的相关部分（我猜......如果我错过了什么让我知道）：

index.js（我的应用程序的入口点）：

import 'bootstrap/dist/css/bootstrap.min.css';
...

.babelrc：

{
    "presets": [
        "react"
    ],
    "plugins": [
      ["react-css-modules", {
        "exclude": "node_modules"
      }]
    ]
}

webpack.config.js :

/* webpack.config.js */

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'eval',

  entry: [
    path.resolve('src/index.js'),
  ],

  output: {
    path: path.resolve('build'),
    filename: 'static/js/bundle.js',
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve('src'),
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader', …

材料界面：v4.8.2
反应：v16.12.0

babel-plugin-react-css-modules 和 rtl 应用程序 - 我想使用 injectFirst 但后来我收到警告： Material-UI: you cannot use the jss and injectFirst props at the same time.

我的猜测是我应该对 jss 进行不同的定义，以便它支持 rtl 和 css 模块。

// Configure JSS - How should I add here the css-modules styles?
const jss = create({ plugins: [...jssPreset().plugins, rtl()] }); 

对于 rtl 我应该这样做：

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

<StylesProvider jss={jss}>
            <ThemeProvider theme={theme}>
                <AppContainer />
            </ThemeProvider>);
        </StylesProvider>

对于 css-modules 样式，我应该这样做：

<StylesProvider injectFirst>
            <ThemeProvider theme={theme}>
                <AppContainer …