标签: css-modules

我一直在使用Webpack,Sass和CSS模块构建一个项目.通常在我的.scss文件中,我定义了一个类,如:

:local(.button) {
    color: white;
}

在我的React组件中,在render方法中,我需要样式:

render = () => {
    const styles = require('./MyStyles.scss');
    <div className={ styles.button } />
}

这一切对世界都很好.一切都按预期工作.

今天我正在阅读CSS模块页面,注意到没有一个选择器:local()像我一样被包含,而且他们导入的样式如下:

import styles from './MyStyles.scss';

而且我觉得"哇看起来好多了,它更容易看到它被导入的地方等等.而且我不想使用它:local(),只是默认情况下本地的东西." 所以我尝试了,并立即遇到了几个问题.

1)`从'./MyStyles.scss'导入样式;

因为我在我的React文件上使用ESLint,所以我立即得到一个MyStyles.scss没有默认导出的错误,这通常是有意义的但是CSS Modules页面说明了:

从JS模块导入CSS模块时,它会导出一个对象,其中包含从本地名称到全局名称的所有映射.

所以我自然希望样式表的默认导出也是他们所指的对象.

2)我试过了 import { button } from './MyStyles.scss';

这会通过linting但button日志为undefined.

3)如果我恢复require导入我的样式的方法,:local未定义的任何内容都是未定义的.

作为参考,我的webpack加载器(我还包括Node-Neat和Node-Bourbon,两个很棒的库):

{ test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) +
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' …

我目前正在使用带有React的CSS模块进行造型.所以我的每个组件都导入了它的组件特定的css文件,如下所示:

import React from 'react';
import styles from './App.css';

const example = () => (
  <div className={styles.content}>
    Hello World!
  </div>
);

export default example;

这样在设计单个组件时工作正常,但是如何应用非特定于组件的全局样式(html,正文,标题标记,div等)？

我正在尝试从CSS模块导入主题,但TypeScript给我一个"无法查找模块"错误,并且主题未在运行时应用.我认为我的Webpack配置有问题,但我不确定问题出在哪里.

我正在使用以下工具:

"typescript": "^2.0.3"
"webpack": "2.1.0-beta.25"
"webpack-dev-server": "^2.1.0-beta.9"
"react": "^15.4.0-rc.4"
"react-toolbox": "^1.2.3"
"node-sass": "^3.10.1"
"style-loader": "^0.13.1"
"css-loader": "^0.25.0"
"sass-loader": "^4.0.2"
"sass-lint": "^1.9.1"
"sasslint-webpack-plugin": "^1.0.4"

这是我的 webpack.config.js

var path = require('path');
var webpack = require('webpack');
var sassLintPlugin = require('sasslint-webpack-plugin');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    './src/index.tsx',
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:8080/',
    filename: 'dist/bundle.js',
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'source-map-loader',
      exclude: /node_modules/,
      enforce: 'pre', …

如何使用Webpack在Typescript中导入CSS模块？

1. .d.ts为CSS 生成(或自动生成)文件？并使用经典的Typescript import语句？用./styles.css.d.ts:

   import * as styles from './styles.css'
   

   Run Code Online (Sandbox Code Playgroud)

2. 使用requireWebpack功能导入？

   let styles = require("./styles.css");
   

   Run Code Online (Sandbox Code Playgroud)

但对于最后一种方法,我必须定义require函数.

什么是最佳方法或最佳选择,还可以处理CSS文件定义和类的IntelliSense？

根据Dan Abramov 的推文,CSS模块支持在create-react-app(CRA)中.只需要扩展module.css他的样式表来启用该功能,但这不适用于我.我的版本是1.1.4 react-scripts.如何使用CRA启用css模块？谢谢

我正在使用webpack，react- datepicker并设法使用提供的 css 模块导入其 css。

import 'react-datepicker/dist/react-datepicker-cssmodules.css

该组件看起来很好很花哨，但现在我想让它像上面的时间元素一样全宽。

查看 CSS，它需要的是react-datepicker-wrapper由库动态添加的元素具有display: block. 我react-datepicker-wrapper在自己的 css 中所做的任何修改都不起作用。

我该怎么办？

日期选择器.component.jsx

import React from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
import './date-picker.component.bootstrap.css';

// eslint-disable-next-line no-confusing-arrow
const buildClassNames = (touched, isInvalid) =>
touched && isInvalid ? 'form-control is-invalid' : 'form-control';

export const DatePickerBootstrap = (props) => {
  const { setFieldValue, setFieldTouched, errors, touched } = props;
  const { name, value, label, ...rest } = props; …

我正在使用以下代码根据来自props的布尔值在React组件中动态设置className:

<div className={this.props.menuOpen ? 'inactive' : 'active'}> ... </div>

但是,我也使用CSS模块,所以现在我需要将className设置为:

import styles from './styles.css';

<div className={styles.sideMenu}> ... </div>

我遇到了这个问题 - 我尝试使用类名来获得更多对多个类的控制,但是因为我需要最终结果是className被设置为两个styles.sideMenu AND styles.active(为了让CSS模块启动)我是不确定如何处理这个问题.

任何指导都非常感谢.

在带有CSS模块的React/Webpack应用程序中,我.card在其自己的.scss文件中有一个模块,另一个模块名为.stat,它是要在其中显示的内容.card.

我需要实现以下内容,但以"css-modules"方式:

.card:hover .stat {
    color: #000;
}

如果我.card在.stat模块内部@import ,所有的.cardcss都被转储到.stat输出中,但我只希望能够使用正确的类名.card.

解决问题的正确方法是什么？

我正在使用一个React组件库(React Toolbox),它使用CSS模块和Webpack在它们的Tab组件中输出这个类:label___1nGy active___1Jur tab___Le7N这tab是我传递的className prop.这些label和active课程来自图书馆.我想应用一组不同的样式active,比如.tab.active在哪里tab引用我创建的样式,并active匹配库创建的生成的选择器,但无法弄清楚如何使用css-modules执行此操作.我需要覆盖这个动态选择器:.label___1nGy.active___1Jur.

[]] 2 [] 3

我想将Next.js与 Sass 和 CSS 模块一起使用，但也想使用Ant Design并想使用 Less 样式来缩小建筑尺寸。

我可以启用 CSS 模块或 Less 加载程序，但不能同时启用。Next.js 中的示例并没有帮助我完成这个问题。