问题标签 [webpack-style-loader]

我有一个这样的目录结构：

在node_modules里面：

我需要像这样生成单独的 CSS 和 JS 包：

自定义样式.css、自定义-js.js、样式-libs.css、js-libs.js

在哪里style-libs并且js-libs应该包含所有库（如 bootstrap 和 jQuery）的 syles 和 js 文件。这是我到目前为止所做的：

webpack.config.js：

客户端.js

除了使用webpack.

我对 webpack 没有太多经验，并且发现它真的很难让我听到它。有几个简单的问题：

1-此配置正确吗？如果是，那么如何使用 ES6 在组件中包含我的 CSS 和 JS 文件。import关键字之类的东西。

2-我什至应该对 CSS 文件使用 webpack 吗？

3-如何在 webpack 中为输入及其各自的输出文件指定单独的目录？all-custom.js应该为custom1.jsand输出类似的东西custom2.js？

我知道这些是一些非常基本的问题，我尝试了 Google，但没有找到一个简单且针对初学者的 Webpack 教程。

So I have the following webpack configuration :

The problem is that when I do webpack --watchthe file does build in the /dist/ folder at every change. Yet when I run the webpack-dev-server the files don't even build. Why is that?

Please help.

我开发了一个单页 Web 应用程序。

问题是图像文件的路径是以绝对方式定义的。

因此，我尝试在这些路径中添加'./public'，这意味着图像文件在公共文件夹下。（在本地开发环境中我使用代理来处理这种情况，而在生产服务器环境中，代理无法使用)

[ex) url('/image/headers/picture.png')，写在 scss 文件中=> url('./public/image/headers/picture.png')，转换成 bundle.js文件]

我认为通过使用 file-loader 或 url-loader 到 webpack.configure 文件可以轻松解决，如下所示：

但是，当我打开 bundle.js 文件时，publicPath 不会添加到原始图像路径中。我尝试使用 resolve-url-loader 但它仅适用于相对路径的类似情况。

感谢您的关注，我是 webpack 的新手。我看过其他类似的问题，但没有运气，如果这感觉像是被问到了，很抱歉

我的 webpack 配置可以在 MacOS 中运行，但在 Windows 上显示错误。

webpack.config.js

我的目录结构是这样的：

并且在 MacOS 上一切正常，但是当我在 Windows 上运行它时，出现错误：

文件就像这样：

我确定我已经安装了 css-loader sass-loader style-loader

这是我的package.json，我怀疑是这个文件造成的。可能是因为我没有将我的loader添加到依赖项中。

谁能帮我使用 webpack 配置添加样式> 我在很多地方搜索过，但没有得到正确的答案。

我需要它使用 sass 加载。

我也是 angular2 和 webpack 的新手

请帮我？

我正在使用 webpack-dev-server 热加载我的所有资产，包括 CSS。但目前，我的 CSS 在 JavaScript 之后加载，这导致我的应用程序在某些依赖于现有布局的地方出现问题。

如何确保在 JavaScript 执行之前加载 CSS？

我想必须有一种方法可以做到这一点module，也许是我可以挂钩的回调？或者也许通过将样式加载器配置为具有优先级？

这是我的 index.js：

这是我的样式加载器：

在这个 style-loader Github 问题上也提出了类似的问题：https ://github.com/webpack/style-loader/issues/121

好的，我已经使用 Webpack 导入了一个 css 文件，style-loader如下css-loader所示：

Webpack 通过style标签将其附加到我的页面。到目前为止，一切都很好。但是，当应用程序的状态发生变化时，我想删除这种特殊的样式。当然，我可以用 删除它document.querySelector('style')，但是有一些自然的 Webpack 方法吗？

提前致谢。

从 angular+webpack 教程中，创建了一个“directives”文件夹，其中包含以下自定义指令的声明

（注意返回之前的 require 语句）

在 webpack.config.js 中，样式加载器和 css 加载器在模块部分中声明：

但是当“npm start”说找不到模块时出现以下错误：错误：无法解析“文件”或“目录”..：

这是我当前的webpack.production.config.js文件：

这不起作用。以下是我webpack.config.js在开发过程中使用的文件，似乎工作正常：

这两个文件之间的主要区别在于生产文件尝试使用，ExtractTextPlugin但是每当我使用命令运行生产配置时，webpack -p --config ./webpack.production.config.js 我都会收到如下错误：

为什么它会尝试_variables.scss在错误的文件夹中查找我的文件？它运行开发配置非常好。

在遵循 Juho 的建议更改我使用提取文本插件的方式后，ExtractTextPlugin.extract('style','css!resolve-url!sass?sourceMap')我得到了这个错误：

我已经分叉（或eject编辑）了 Facebook 的create-react-app项目，要求添加一些额外的工具（例如测试、redux、less 等），并且可能天真地假设偏离路径会'问题不大。

我想我已经设法使用以下内容减少了webpack.config.dev.js：

我已经将 CSS 加载器留在了那里（可能是错误的），以便我可以引入 react/bootstrap 库。也许有更好的方法来做到这一点。

无论如何，我对如何将预处理器添加到webpack.config.prod.js. 这是一个片段（带有 Facebook 的有用评论）：

如何以稳定且高性能的方式添加较少的预处理器步骤？

对于上下文，我的index.js导入如下所示：