标签: css-modules

我正在使用 Rollup 制作一个 React 组件库，并使用以下组件设置：

//component A
import styles from './stylesA.module.scss'

const ComponentA = () => {
  return(
    <div className={styles.red}>Component A Styled</div>
  )
}

export { ComponentA }

//stylesA.module.scss
.red {
  color: red;
}

如何配置 Rollup 以便我的输出组件自动将生成的.css 文件导入到我的组件中？请注意，我不想将样式捆绑到文件中.js，也不想在导入最终包时手动导入样式import 'my-library/dist/stylesA.css'

我的 rollup.config.js 目前看起来像这样：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import pkg from './package.json'


export default {
  input: 'src/index.js',
  output: [{
    dir: './dist',
    format: 'cjs'
  }],
  plugins: [
    resolve(),
    babel({ …

希望这里有人能帮我解决这个问题。

我正在尝试通过 NextJs 建立一个网站。我的其中一个页面有一些段落和按钮，它们的样式根据状态和事件而有所不同。在使用纯 React 时以及在 NextJs 中使用全局样式表时，我都可以使样式按预期工作；但是当我使用 CSS 模块时，我无法让它按预期运行。

（注意：我还可以通过使用简单的三元来使其工作，例如 <h1 className={submitted ? styles.showresult : styles.hideresult}>Correct? {correct}</h1>；但我还有一些其他场景，我需要依赖多个 if 并创建多个类，每个类都有自己的样式，所以我无法制作一个简单的三元我的最终解决方案。

例如，这是文件 pagex.js

import React from 'react';
import ReactDOM from 'react-dom';

const Pagex = () => {

const [submitted, setSubmitted] = React.useState(false); // whether the submit button was pressed

function calculateScore() {
  let correct = 0
  let incorrect = 0
    //......some scoring logic.....    
  setSubmitted(true)
  }

  // function to create a display class based on whether the submit button has been …

使用 Nextjs 和 Storybook 开发一个新项目。我们使用 SCSS 模块来设计组件的样式，它们在浏览器上的实际应用程序中工作得很好，但它们不会在故事本身中链接起来。这里有一些简单的片段来显示我现在所处的位置：

成分：

import React from 'react'
import styles from './VideoEntryTile.module.scss'

const VideoEntryTile: React.FC = () => {
    return (
        // This displays properly in the browser but not storybook
        <div className={styles.container}>
            <p>Hello</p>
        </div>
    )
}

export default VideoEntryTile

SCSS模块：

.container {
    background-color: blueviolet;
}

组件故事：

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import VideoEntryTile from './VideoEntryTile';

export default {
  title: 'Video Entry Tile',
  component: VideoEntryTile,
  argTypes: {
  },
} as …

我目前正在学习CSS模块,他们看起来会解决很多问题.但所有文档都基于CSS,我想使用SASS.

这可能吗？例如,我怎样才能使以下语句有效？

.normal {
    composes: common;
    composes: primary from "../shared/colors.scss";
 }

我想使用 postcss-loader 和 css 模块将一组样式传递给 React 组件。我用于编译 css 文件的 webpack.config.file 如下所示：

loaders: [
    'style-loader', 
    'css-loader?modules&importLoaders=1&localIdentName[name]__[local]___[hash:base64:5]',
    'postcss-loader'
],

我的 React 组件文件如下所示：

import styles from './cssFile.css';
class Component extends React.Component{
    render(){
       return(
           <div className={[styles.spinner, styles.spinner_2]}></div>
       )
    }   
}

每当我只将一种样式传递给 className 时，它​​都会正确加载它，但是当我传递一个数组时，它不会解析任何样式。相反，它在编译类名称上用逗号连接它。

如何将多个样式传递给元素？

如何根据 GLOBAL 父选择器（在本例中为 isOpen）的存在，使用 Sass 和 CSS 模块为我的 React 组件设置样式？

渲染的 HTML：

<div class="isOpen">
   <div class="MyContainer__MyStyle___u9dTa">
      My react component
   </div>
</div>

我的 Sass 文件：

.MyStyle
   margin-left: 100px
   color: black

// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.MyStyle
   :global(.isOpen) &
      margin-left: 0
      color: red

上面的代码给出了错误：属性“global”必须后跟一个“:”

现在我正在将我当前的项目移动Webpack 1到,Webpack 2并且我遇到了一些以前工作正常的css模块的问题.特别是,我使用css-loader和react-css-modules.我目前的开发配置如下:

test: /module\.css$/,
use: [
        'style-loader',
        {
           loader: 'css-loader',
           options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[name]__[local]___[hash:base64:5]'
           }
        },
        'postcss-loader'
   ]

它工作正常.对于生产我使用ExtractTextPlugin(版本2.0.0-beta.4)和我的Webpack配置为这种情况是这样的:

test: /module\.css$/,
loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
                    {
                       loader: 'css-loader',
                       options: {
                           modules: true,
                           importLoaders: 1,
                           localIdentName: '[hash:base64:5]'
                       }
                     },
                     'postcss-loader'
                    ]
                }),

在这种情况下,构建失败并出现以下错误:

 Module build failed: Error: composition is only allowed
 when selector is single :local class name

所以看起来它没有预先添加本地前缀.它也在css-loader文档中提到:

注意:对于使用extract-text-webpack-plugin进行预渲染,您应该在预渲染包中使用css-loader/locals而不是style-loader!css-loader.它不嵌入CSS,只导出标识符映射.

所以我尝试了加载器:'css-loader/locals'以及将它添加到选项中,但不幸的是,没有任何作用.

我也试图用postcss …

我有一个使用css模块的webpack 2应用程序

我现在只想开始使用手写笔.

我想解决方案是更新我的webpack.config.js:

当前的webpack.config.js:

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [

      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader'
        }
      },

      {
        test: /\.css$/,
        loader: 'style-loader'
      },

      {
        test: /\.css$/,
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },

    ]
  },
  resolve: {
    extensions: ['.js'],
    modules: [
      path.join(__dirname, …

我有一个简单的博客，我正在使用 create-react-app 开发（使用 react-scripts@next 来获得 CSS 模块支持）。

回购 演示

我遇到的问题是 CSS 悬停过渡非常滞后和缓慢。我之前使用 Node EJS 模板实现了这个界面，一切都很快。

我认为问题可能与PostSummary组件接收新道具并不断重新渲染有关，但是所有道具在加载后似乎都是静态的。

我检查了 Chrome 性能选项卡，它说大部分周期都被绘制时间（而不是加载时间）使用了。

很困惑，有什么我可以测试来解决问题的吗？

我没有将 Webpack 配置用于 React SSR。相反，这是我的配置：

require("@babel/register")({
  presets: ["@babel/preset-env", "@babel/preset-flow", "@babel/preset-react"],
  plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-dynamic-import-node",
    "@babel/plugin-transform-modules-commonjs",    
    [
      "module-resolver",
      {
        root: ["./src"]
      }
    ]
  ]
});

require("ignore-styles");

module.exports = require("./server.js");

问题是 css 类在呈现的 html 中未定义。我怎样才能解决这个问题？