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

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} />

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

我不一定要寻找硬而快速的代码，但任何方向将不胜感激。我不确定这一切是否可能，尽管其中一些绝对应该是可能的。我知道通过 styles. 访问样式可能不可行。

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

谢谢

Answer 1

您尝试做的事情是不可能的，但有一个解决方法；不幸的是，答案可能尝起来像浴缸 Gin 。您可能知道，您不能直接需要 Stylus。因此，您被迫使用 Stylus 加载程序，您有两个选择，stylus-loader 或 Walmarts stylus-relative-loader ，我推荐后者。这就是事情变得有点复杂的地方。由于您想要使用 CSS 模块并将样式编译到样式表中，因此您必须使用 extract-text-webpack-plugin .

长话短说，如果您使用的是 Webpack 1.x，这里有一个加载器的示例配置，您需要将其实现到您的 Webpack 配置中，该配置使用 extract-text-webpack-plugin、css-modules 和 stylus-相对加载程序。

  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')
  ]

从这里开始，您需要做的就是将 Stylus 移动到一个单独的文件，例如 my-styles.styl，然后将其 require 放入您的 React 组件中，如下所示。

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

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

PS。抱歉，如果这不是您要找的内容，但我的“声誉”不允许我通过评论提出问题，也不能使用两个以上的链接。