问题标签 [webpack-style-loader]

运行 webpack-dev-server 时出错

我的 webpack.config.js 看起来像这样：

在使用这个插件之前一切正常。因为我打算为 css 输出不同的包，所以我需要解决这个问题。

在 github 中发现问题，但没有帮助：

我正在编写一个使用 Webpack 的客户端应用程序，但我无法弄清楚如何需要 materialize-css 包。我正在使用Henrik Joreteg 的 hjs-webpack 包，并且通过在 sass 文件（例如）中进行导入来包含 Yeticss npm 包@import 'yeticss'，但这不适用于物化。像任何其他包一样直接在代码中（例如import 'materialize-css'在 JS 文件中）要求它也不起作用。

我的 webpack 设置不会生成外部 css 文件。但是，它捆绑了我的 .js 就好了。我正在使用 ExtractTextPlugin，但它仍然无法正常工作。不会产生错误。任何帮助将不胜感激！:-)

这是我的 webpack.config.js

Package.json 开发依赖项

文件夹结构：

CSS 与 React 组件的当前做法似乎是使用 webpack 的 style-loader 将其加载到页面中。

通过这样做，样式加载器将向<style>DOM 中注入一个元素。但是，<style>不会在虚拟 DOM 中，因此如果进行服务器端渲染，<style>将被省略。这会导致页面具有FOUC。

是否有任何其他方法可以加载在服务器端和客户端都可以使用的CSS 模块？

我是 webpack 的新手，我正在尝试了解加载器及其属性，例如测试、加载器、包含等。

这是我在 google 中找到的 webpack.config.js 的示例片段。

1. 我对这个测试是否正确：/.js$/ 将仅用于扩展名为 .js 的文件？

2. 加载器：'babel-loader'，是我们使用 npm 安装的加载器

3. 包括：我对此有很多问题。我们放入数组中的任何内容都会被转译，我说得对吗？这意味着，index.js、config.js 以及 lib、app 和 src 中的所有 *.js 文件都将被转译。

4. 更多问题包括：当文件被转译时，*.js 文件是否被连接成一个大文件？

5. 我认为排除是不言自明的。它不会被转译。

6. query: { presets: ['es2015'] } 有什么作用？

我正在设计我的反应应用程序。我正在使用带有 webpack 的 css 模块。这是我的配置：

我设计了我的组件，煮了一杯咖啡，但现在它不工作了。所以我有一个我想使用的样式表。我正在导入它：

但是，当我打破我的组件时，styles没有定义。我的样式现在都没有被应用。这是我如何使用它的示例：

为什么会styles是空的？

按照本教程，

https://github.com/christianalfoni/react-webpack-cookbook/wiki/Loading-CSS#component-specific

我尝试实现这个逻辑，这就是它的实现方式。

这是它在网络上呈现的方式，

如您所见，导航栏类没有应用css，因为类名呈现为“.app-components-navbar-navbar-navbar-wrapper”。但类名应该是“navbar-wrapper”

1. 如何解决这个问题？
2. 这是它应该如何工作的吗？
3. 我怎样才能实现组件特定的 css？

I am working with a webpack-dev-server and I am trying to include bootstrap.

I have this project structure:

This is the index.html:

Whenever I run the server, I get an error of the type:

Here is the webpack.config.js:

Everything else works fine, the problem is just bootstrap. I tried a lot of different variations on the configurations, but I can't get it to work.

I also tried requiring it directly from javascript on index.js:

And I get this error:

Edit

From what I realised, webpack is trying to find a font file inside my project, when trying to import Bootstrap.min.css.

我有两种布局（LayoutWithShortHeader、TestLayout）和这样的路线：

当我打开 /ddd 时，页面由 TestLayout 和 TestPage 组成。不幸的是，它具有来自 LayoutWithShortHeader 的样式（导入 './layout.sass'；在 LayoutWithShortHeader 内），我不知道为什么。

测试布局.jsx：

Webpack 配置：

webpack.common.config.js：

webpack.config.js: '使用严格';

那么如何将一种布局的样式与另一种布局的样式隔离开呢？

这是我的超级简单的 scss 文件：

我以这种方式将它导入到我的 App.jsx 文件中：import "./App.scss";

这是我的模块中的内容：加载器：

但是，我在控制台中得到了这个，而不是发生了令人敬畏的事情：

这是非常令人敬畏的。如果有帮助，我将代码放在 github 上。到目前为止，我还没有任何运气让它发挥作用。我尝试过不同的风格，等等，但一无所获。