问题标签 [webpack-style-loader]

Webpack 的主页声称将所有样式表和依赖项编译到一个 CSS 文件中，但这是一种误导。您不仅需要一个单独的 CSS 加载器，而且它会输出为一个 JS 文件，该文件加载然后应用嵌入的 CSS 字符串。

为什么要走长途？这样做一定有充分的理由，对吧？

（我知道提取文本插件，但这不是默认行为。）

由于 JavaScript 是同步执行的，这不会对尽快显示内容造成惩罚吗？此外，在最终加载和应用样式之前，我可以在短时间内看到一个无样式的页面。

当一个简单的 CSS 文件很好时，为什么我希望通过 JS 加载我的样式？

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).

我正在使用react-router 2.4.0和React 15.2.1Webpack。我看到样式正在通过 IndexRoute 组件（在此示例中为 Main）加载，尽管它没有被加载。

考虑以下来源：

AppRouter.js

主.js

webpack.config.js：

当导航到/并且用户退出时，路由器会重定向到/login，但是所有加载的样式Main.scss都被附加到 DOM 中。

我怎样才能防止这种情况发生，并且只加载LoginPage组件样式？

我想用 Webpack 解决一个简单的任务。我只想将我的 .SCSS 文件编译成 .CSS 并使用保存路径和名称保存它们。

例如：

1. 我在/component/subcomponent，我在require('./first-style.scss')

2. 我进来了/module/component，我又做了require('./second-style.scss')

我想编译 scss -> css 并将它们放入 /public/styles/component/subcomponent/first-style.css并 /public/styles/module/component/second-style.css

并且 require 应该返回带有新路径的字符串/public/styles/component/subcomponent/first-style.css

我只为简单的css（不是scss）解决了这个任务，它看起来像这样

但我找不到为 SCSS 重复它的方法。谁能帮我？

https://github.com/shama/stylus-loader

Webpack-dev-server 给我以下错误：

所以在我看来我没有stylus-loader正确配置我的或者它有问题。

文件结构

Webpack 配置

header.styl

页眉.jsx

通过进行一些更改，我可以使正常的 CSS 正常工作：

文件结构 重命名header.styl为header.css

Webpack 配置

header.styl

页眉.jsx

节点模块

我正在编写一个基于以下内容的同构 React 应用程序：

https://github.com/choonkending/react-webpack-node

我想使用 scss 而不是示例中使用的 css 模块。出于某种原因，我很难让他们工作。我的第一步是从服务器和客户端配置中删除webpackcss加载器，用特定的加载器替换它们（以及删除）：scsspostcss

但这ReferenceError: window is not defined在构建为样式加载器时会抛出，显然不适合服务器端渲染。所以我的下一个想法是使用isomorphic-style-loader. 据我所知，要让它工作，我需要用他们的高阶组件来装饰我的组件withStyles：

然后在服务器上的代码渲染页面做一些诡计。但问题是，包文档中的示例显示了在 Express ( https://libraries.io/npm/isomorphic-style-loader#webpack-configuration ) 内触发的通量操作，而我正在使用的样板文件 uses react-router。所以我有点迷茫，我应该如何将这个对象注入insertCss到上下文中。我试过这个：

但我仍然有Warning: Failed context type: Required context 'insertCss' was not specified in 'WithStyles(App)'.任何想法如何解决这个问题？更重要的是 - 没有更简单的方法吗？这似乎是很多额外的工作。

所以这是我的 webpack 配置文件：

这是我收到的错误消息：

现在，我知道 Object.assign 不是开箱即用的，所以就像您看到的那样，我尝试添加插件“babel-transform-object-assign”（如此处所述：https://github .com/react-toolbox/react-toolbox/issues/45），我尝试从 core-js （https://github.com/zloirock/core-js#commonjs）和 babel-core要求它，以及作为“运行时”选项等。简单地说——不行。Postcss 显然引起了问题，但我已经降级了。

我还没有真正开始尝试解决 sass 加载程序问题，我认为我会在解决 Object.assign 问题后开始解决这个问题，尽管我从过去 5 个小时开始就一直在解决这个问题，而且我真的是一无所获。所以我添加了两条错误消息，希望有人能指出我正确的方向。

我怀疑我已经将旧语法与新语法混淆了，但我真的无法弄清楚这个......帮助？

我正在尝试加载图像：

在我的 style.scss 中，它不起作用

这是我的 webpack.config：

我正在使用文件加载器，但在浏览器中呈现的 url 与图像的 url 不匹配。

我认为我没有使用源地图：https ://github.com/webpack/style-loader/issues/55

任何人都可以帮忙吗？

我有一个webpack.config.js这样的：

里面的一些风格test.css是这样的：

在入口文件中，script.js我必须import './css/test.css';将 css 加载到 html 页面中。但是当我$ npm start使用时script.js，它会在* { }样式声明中出错，并出现以下错误：

我认为box-sizing: border-box在 css 上使用通配符设置是非常标准的东西。为什么会出现这个错误？

我正在开发一个 chrome 扩展。我将 boostrap 3 用于 UI。

这是我习惯于包含boostrap的方式。
localhost:3000 是使用 webpack 网络服务器创建的服务器。

此时一切正常，这是一个截图：

但我不希望我的 chrome 扩展依赖于网络，所以我决定使用以下方式下载 boostrap：

npm install boostrap其中已经下载了boostrap 3。我还决定使用webpack来加载boostrap.min.css。

我没有更改 css 加载程序（来自样板文件），但我添加了 web 字体和 svg 的加载程序。

最后，我在 javascript 入口点中包含了 boostrap.min.css ： import 'bootstrap/dist/css/bootstrap.min.css';

现在，这就是我的扩展的样子：

我认为加载了boostrap的一部分（因为第二版中的链接看起来与第一版中的链接相同。但显然，其他组件没有加载。

我也使用 react-boostrap。

谢谢