问题标签 [isomorphic-style-loader]

style-loader我的目标是将 CSS 渲染到服务器端的样式标签中，或者与插件在客户端的操作方式完全相同。我知道这是不可能style-loader的，因为直接写入 DOM 并且 Node.js 中不存在 DOM。

目前我正在使用 ExtractTextPlugin，但是如果我没有将所有 CSS 编译到一个大文件中，那么当页面加载时它会丢失一些样式，除非我在服务器上运行 Webpack 而不是直接编译它。

我有这个代码呈现页面：

服务器.jsx

呈现-full-page.jsx

当我在我的 React 模块中需要样式时，我正在全局导入样式，如下所示：

而且我想改变我加载 CSS 的方式，将所有 CSS 放入一个 var 中，我可以循环并输出<style>标签style-loader，就像这样：

这在 Webpack 中可行吗？有没有这样的插件isomorphic-style-loader能够做到这一点？如果是这样，我将如何修改我的代码？

我正在使用 material-ui 并尝试RaisedButton使用其名为的道具之一来设置背景颜色的样式backgroundColor：

但是该属性永远不会产生任何差异。

我使用的material-ui的版本是0.15.0-alpha.1，根据npm list --depth=0命令的结果。

在我问这个问题之前，我已经做了一些搜索，但无法弄清楚问题是什么。

Let's say this is your SCSS:

And this is how you use it:

So this works well.

Now what happens if you need to name your class some-class? Clearly className={s.some-class} doesn't work, and neither does className={s.someClass} (nothing happens).

我基于https://github.com/barbar/vortigern创建了自己的入门套件，一切正常，但我有一个问题。

通常，当我想将所有样式连接到应用程序时，我会这样做

bundle.scss - 包含所有导入。

但在同构的情况下，一切都变得复杂了。

转化为：

问题 1：app_global_1pn - 这个名字会永远存在吗？我可以像这样使用它

问题2：有没有没有uglify风格的解决方案？

我正在尝试使用 isomorphic-style-loader 配置 webpack，但我不断收到以下消息。（我真的不需要使用同构，所以如果有更简单的方法可以做到这一点，我不介意改变）。我需要的是 scss 文件的范围。

失败的上下文类型：insertCss中未指定所需的上下文WithStyles(Logo)。检查Header.

这是我的 webpack.conf.js：

这是我的入口点（main.js）：

这是我的路线（routes.js）：

引发错误的文件 (Logo.js)：

从 'react-router' 导入 ReactRouter, { withRouter, Link }; 从'react'导入反应，{组件，PropTypes}；从 'isomorphic-style-loader/src/withStyles' 导入 withStyles；从 './Logo.scss' 导入 s；

我试图包含的 css（Logo.scss）：

如果我更改带有样式（s）（徽标）的行，模板将呈现但没有 css。我很确定问题是我在 Logo 类的上下文中需要一个名为 insertCss 的方法，但我不知道以什么方式将它放在那里，或者该方法应该是什么样子。任何帮助，将不胜感激。

我无法让 webpack 'isomorphic-style-loader' 从反应组件中正确解析我的 css 模块。webpack 一切运行良好，但是当我尝试在服务器上加载 react 组件时，出现以下错误：

我的 webpack 配置如下：

我的反应组件如下（目前不尝试在任何地方渲染css，只是试图让它解析！）

我将使用CSS 模块导入样式并使其与服务器端渲染一起使用。我尝试了以下方法，但每种方法都有自己的警告。require('.style.scss')如果有任何副作用，最好的方法是什么？

1. 使用css-modules-require-hook：

   优点：易于配置。您只需要在服务器代码的开头调用钩子即可。您无需修改​​组件。

   警告：它修改了已弃用require.extensions的全局对象。

2. 使用同构样式加载器：

   优点：没有更多的钩子require.extensions。

   警告：使用使用 React 的 HOC 包装组件Context，这是一个实验性API，可能会在未来的 React 版本中中断。

3. 使用webpack-isomorphic-tools：

   优点：不依赖require.extensions或Context（AFAIK）。

   警告：将服务器包装在 webpack-isomorphic-tools 实例中。我们可以摆脱webpack-assets.json吗？

4. 使用Webpack捆绑服务器：

   优点：没有更多的钩子或注射。

   警告：在开发中，每当代码更改时捆绑所有内容非常麻烦，甚至在大型捆绑文件中更难调试。.js不确定 - 您可能需要通过捆绑.js测试运行器。

免责声明：

• 下面的优点和注意事项只是我的两分钱，实际上我喜欢他们为解决问题而采取的所有库、插件和方法，并且非常感谢他们的努力。
• 我不是以英语为母语的人，如果我不实陈述自己，请纠正我。

运行 webpack 时我有下一个 webpack 2 规则配置抛出下一个错误：

¿ 怎么了？

:)

感谢帮助

试图用我的新项目实现同构渲染，所以我读了很多文章css-loader，比如状态共享等。因此，经过一番挣扎后，我用 css locals 在服务器端渲染了我的页面。所以我继续并开始构建其他页面，因为一切看起来都很棒，直到我没有禁用浏览器上的 javascript 。之后我发现了 html 的区别我从服务器收到的具有不同的 css 本地 className 并且bundle.css具有不同的。我真的卡住了。

这是我的webpack.config。我知道我做错了什么。如果您指出，我将不胜感激。

例如：我.style__header__1H9xAC9从服务器端获得，html并且在 bundle.css 中获得.style__header__2uiLmVi，但是如果我启用 JavaScript，则应用程序会在客户端再次呈现与 bundle.css 包含的相同类名。

我是nextjs的新手，正在尝试一种模块化我的 CSS 的方法。找到了这个解决方案，并尝试在我的本地使用 isomorphic-style-loader 实现这个示例应用程序。

问题是 CSS 没有得到应用。CSS 模块类正在被应用于css 文件中的类.App-root-2UbkX。.root但 CSS 不适用于它。

它正在创建一个空style标签。

我正在使用最新版本的 node 和 npm。