标签: css-modules

我正在使用webpack和React与react-css-modules和scss文件.当我尝试构建它时,每个导入scss文件的文件都会出现错误 -

ERROR in ./app/components/Buttons/Button.scss
Module build failed: ReferenceError: window is not defined

我用谷歌搜索了一整天,没有在哪里!请帮忙!

这是我的webpack设置:

var webpack = require('webpack');
var PROD = (process.env.NODE_ENV === 'production');
var precss       = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: [
        './app/index.jsx'
    ],
    output: {
        path: __dirname + '/dist',
        filename: PROD ? 'bundle.min.js' : 'bundle.js'
    },
    watchOptions: {
        poll: true
    }, …

我正在尝试更改div颜色值更改时的背景.这是我的函数,它接收颜色值:

ChangeColor(oColor) {
    this.props.ChangeColor(oColor);
    console.log("Refs: ", this.refs.colorPicker.className);
  },

这是css类

.colorPicker {
    padding-right: 25px;
    background: #000;
    display: inline;
    margin-right: 5px;
  }

这是我的div元素,其背景需要在运行时更新.

<div ref='colorPicker' className={this.GetClass("colorPicker")}  />

我不确定refs synatx所以请帮助解决这个问题.谢谢.

我现在正在使用带有AngularJS 1.5组件的css-modules.堆栈是webpack+ css-loader?modules=true+ angular 1.5 components+ pug.

目前,我必须执行以下步骤才能在我的pug模板中使用css模块.

// my-component.js

import template from 'my-component.pug';
import styles from 'my-component.css';

class MyComponent {
    constructor($element) {
        $element.addClass('myComponent');        // ------ (1)
        this.styles = styles;                    // ------ (2)
    }
}

angular.module(name, deps)
    .component('my-component', {
        controller: MyComponent,
        template: template,
    });

// my-component.pug
div(class={{ ::$ctrl.styles.fooBar }}) FooBar    // ----- (3)

// my-component.css
.myComponent { background: green; }
.fooBar { color: red; }

有两个问题:

1. 每个组件都必须$element手动注入和设置其类名.这样做的原因是,AngularJS组件标签本身存在于没有任何类的结果HTML中,这使得CSS变得困难.例如,如果我MyComponent像上面这样使用:

   <div>
     <my-component></my-component>
   </div>
   

   Run Code Online (Sandbox Code Playgroud)

   它将生成以下HTML: …

我有一个项目有一组css文件(每个反应组件一个).我正在使用webpack中的css-loader(带模块)以及postcss-cssnext.

理想情况下,我想要一个单一的,variables.css所以我可以跨css文件共享变量.我试过variables.css包含类似的东西:

:root {
  --gutter-width: 1rem;
  --outer-margin: 2rem;
  ...
}

我然后导入所以它通过css加载器.问题是,其他文件没有接收到这些变量,所以要么这不起作用,要么我做错了(包括在组件css文件中直接工作).

有效的一件事是拥有一个styles.json带有以下webpack设置的文件:

postcss: function (webpack) {
    return [
        ...
        require("postcss-cssnext")({
          features: {
            customProperties: {
              variables: require('./src/styles.json')
            }
          }
        })
        ...
    ]
}

这个问题的主要问题是每次我改变一个变量我都要重新启动webpack dev服务器(所以重新加载webpack配置).这不太理想.

那么,有什么想法更好地做到这一点？

我有一个具有自己风格的组件，例如

.prompt { color: red; }

声明为：

import cn from 'classnames';
import styles from './styles.css';

const MyComponent = ({className}) => {
  return (
    <div className={cn(styles.prompt, className)}>
      test
    </div>
  );
}

在我的特定用例中，将实际定义要传入的className的样式表，并将其添加到模块的样式表之前的头部，因此模块的css始终会覆盖传入的className的样式。类似：

请注意，background: yellow来自第二类的from被模块自身类的背景覆盖。

除了在辅助类中使用！important之外，我该如何解决？

CardComponent假设我们有这样的第三方

<Card title="This is a title in the header">This is text in the body</Card>

这会以纯 HTML 形式呈现

<div class="Card">
  <div class="CardHeader"></div>
  <div class="CardBody"></div>
</div>

我使用 css 模块进行样式设置（在本例中为 scss）。

.customCard {
  .CardBody {
    color: red;
  }
}

然后将类添加到Card中

import styles from ...
...
<Card className={styles.customCard} ...>...</Card>

上面将不起作用，因为它为CardBodylike创建了一个生成的类CardBody_sjkdh43。有没有办法在模块中选择非生成的类名？或者这只能以旧时尚的方式使用样式表？

演示沙盒

我最近开始在 next.js 项目中使用模块，但在新创建的 .module.scss 文件中不断收到此错误：“Selector ":root" is not pure（纯选择器必须包含至少一个本地选择器）类或 ID）”。我知道这是因为我没有使用纯 css 选择器，就像我在网上其他地方看到的那样，唯一的问题是我正在使用的导入，但我需要这些变量的导入，如$cl-light-gray下面的示例文件所示：

@import "src/common/styles/global-styles.scss";
@import "node_modules/bootstrap/scss/bootstrap";
@import "src/common/styles/palette.scss";
@import "src/common/styles/typography.scss";

.dashboard-dropdown-hover {
  @extend .px-1;
  @extend .py-2;
  @extend .mt-3;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: 200ms;
  background-color: transparent;
}
.dashboard-dropdown-hover:hover {
  background-color: $cl-light-gray;
}

有谁能解决我应该如何解决这个导入问题？我知道如果我切换回 .scss 它将起作用，但我试图避免导入 _app.tsx 中的所有 .scss 文件，因为这将至少有 30 个导入，而且这些样式并不打算是全局的。最后，当我使用 Sass 时，为什么 Next.js 期望我使用纯 css 选择器，而使用 Sass 是因为它的非纯元素？

我正在尝试使用像-tres和基础的东西与React和css模块,但我无法弄清楚如何正确地将它们导入我的项目.

请注意,我正在使用HotModuleReplacementPlugin并ExtractTextPlugin获取单个css文件.

在顶级组件的css文件中的某个地方,我希望能够做到,@import 'font-awesome';但我怎么能这样做,以便文件将按原样处理,并且类不会最终本地化为font_awesome__fa-check这样的？

这是我的webpack配置:

var paths = {
  app: path.join(__dirname, './app/'),
  dist: path.join(__dirname, './dist/'),
  external: path.join(__dirname, './node_modules/'),
}
module.exports = {
  entry: {
    site: [
      'webpack-dev-server/client?http://localhost:5000',
      'webpack/hot/dev-server',
      path.join(paths.app, '/index.js'),
    ]
  },
  output: {
    path: paths.dist,
    publicPath: '/',
    filename: 'scripts/[name].[hash].js',
    chunkFilename: '[name].[chunkhash].js'
  },
  resolve: {
    extensions: ['', '.js'],
    root: paths.app,
    alias: {
      'font-awesome.css': path.join(paths.external, '/font-awesome/css/font-awesome.min.css')
    }
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loaders: ['babel'],
        include: path.join(__dirname, …

我有一个最小的React组件,它由两个文件组成:button.jsx和button.less.导入样式,并为类名添加哈希,以使组件的所有样式都是局部的.

这很好,但我想将所有组件代码放在一个文件中.是否可以在不丢失css模块性的情况下内联jsx文件中的样式？

现行守则

button.jsx

import React from 'react';
import styles from './button.less'

export default class Button extends React.Component {
    render() {
        return <button className={styles.primary}>{this.props.text}</button>;
    }
}

button.less

@import '~semantic-ui/src/definitions/elements/button.less';

.common {
    composes: ui button;
}

.primary {
    composes: common primary;
}

webpack.config.js(相关位)

module: {
    loaders: [
        {
            test: /\.jsx$/,
            loader: 'babel'
        },

        {
            test: /\.less$/,
            loader: "style!css?modules&importLoaders=1!less"
        }
    ]
},

我想写的是什么

button.jsx

<style lang="less" modules>
    @import '~semantic-ui/src/definitions/elements/button.less';

    .common {
        composes: ui button;
    }

    .primary { …

有没有一种方法可以在Visual Studio代码中配置emmet以使用React的CSS模块？

当我键入... div.container并点击选项卡时，它变成<div className="container"></div>

这里的问题是它没有使用CSS模块。我希望它成为这个： <div className={styles.container}></div>

有没有办法在VS代码中获得此功能？