Question

我想在我的React组件类中声明我的样式（手写笔）。优选地，同时也使用CSS模块：

export default class HelloWorld extends Component {
  render() {
    return (
      <div className={styles.hello} />
    );
  }

  static styles = `
    .hello
      display block
  `;
}

甚至可能

const styles = stylus`
  .hello
    display block
`;

const HelloWorld = () => <div className={styles.hello} />

这里的目标是通过stylus（或其他预处理器）将样式编译成样式表，从生成的javascript包中剥离style块，并通过CSS模块和className属性访问样式在JSX中。我更喜欢在编译时编译这些（babel / webpack），而不是在运行时编译。

我不一定要寻找硬性和快速的代码，但任何方向都会非常感激。我不确定是否所有这一切都是可能的，尽管其中一些肯定应该是。我了解通过styles.访问样式可能不太可行。

我从来没有写过babel或webpack插件，所以我几乎不知道从哪里开始。我阅读的大部分文档和教程似乎都没有让我到达我想去的地方。

由于

Answer 1

您尝试做的事情是不可能的，但有一种解决方法;不幸的是，答案可能会像浴缸杜松子酒一样。您可能已经意识到，您不能直接require手写笔。因此，你被迫使用Stylus加载器，你有两个选项，手写笔加载器或Walmarts stylus-relative-loader，我会推荐后者。这是事情变得有点复杂的地方。由于您要使用CSS模块并将样式编译到样式表中，因此必须使用extract-text-webpack-plugin。

简而言之，如果您使用的是Webpack 1.x，那么您需要在Webpack配置中实现加载程序的示例配置，该配置使用extract-text-webpack-plugin，css-modules ，和stylus-relative-loader。

  module: {
    loaders: [{
      test: /\.styl$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!stylus-relative-loader')
    }]
  },
  plugins: [
    new ExtractTextPlugin('main.css')
  ]

从这里你需要做的就是将你的手写笔移动到一个单独的文件，如my-styles.styl，然后将require移动到你的React组件中。

const styles = require('./my-styles.styl')

const HelloWorld = () => <div className={styles.hello} />

PS。对不起，如果这不是您正在寻找的，而是我的声誉＆＃34;不允许我通过评论提问，我也不能使用两个以上的链接。

编写webpack或babel插件以将静态属性编译到样式表中

1 个答案: