问题标签 [webpack-style-loader]

我正面临Webpack这个奇怪的问题。花了几个小时后找不到解决方案。

当我尝试通过此设置图像源时，在我的 jsx 文件中

它工作得很好但是当我尝试使用 scss 设置背景图像时

图像没有被 webpack 加载。

这是我的 webpack 文件

I modified the React Hot Loader Boilerplate webpack.config.js so that it will export CSS into a separate file by adding the module:

As well as the plugin:

Here is the full webpack.config file for reference. While this correctly exports app.css when I run webpack, it kills the hot reload functionality for development. If I revert the module to:

Hot reload works fine (adjusted webpack.config).

What is the best setup to easily switch between these two when I'm developing vs. exporting production ready code? In my mind, if I could use npm start (which just calls node server.js) to automatically use development mode, and then run webpack or webpack -p to automatically use production, that would be ideal.

使用 webpack，我使用 require 调用从node_modules文件夹中加载 css 文件。

我的配置的一部分：

实际的 require 调用如下所示require('purecss/build/pure.css')：

虽然工作完美，但我有点不安，purecss/build/因为我依赖于第三方模块内的文件夹结构。如果他们改变了一些东西，我的应用程序将不可避免地崩溃。有没有办法绕过这个（例如通配模式）？

我正在为我的反应应用程序使用 .scss 文件，并且需要使用需要 .css 文件的第三方组件。我将 webpack.config 文件更新为：

但是，当我尝试运行我的应用程序时，我SyntaxError: Unexpected Token . 发现我对 webpack 还很陌生，所以我不确定我在这里缺少什么。为了在我的应用程序中使用 .css 文件和 .scss 文件，我需要进行哪些更改？

完整的错误信息：SyntaxError: Unexpected token . at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:387:25) at Object.Module._extensions..js (module.js:422:10) at Module.load (module.js:357:32) at Function.Module._load (module.js:314:12) at Module.require (module.js:367:17) at require (internal/module.js:16:19) at Object.<anonymous> (/Users/erichardson/Projects/interview_react/build/webpack:/external "react-flexr/styles.css":1:1) at __webpack_require__ (/Users/erichardson/Projects/interview_react/build/webpack:/webpack/bootstrap 1793a21c8f893ac9d09a:19:1) at Object.<anonymous> (/Users/erichardson/Projects/interview_react/build/server.js:3659:3)

我正在尝试使我正在开发的 React 应用程序同构。这样做的一个已知问题是 webpack 加载器允许import/require非 JavaScript 资产，例如 CSS 文件。例如

如果使用 Express 构建应用程序，则节点将执行此导入并失败，因为它无法处理 CSS 文件，它只需要 javascript（感谢babel-registerJSX）。

解决此问题的方法之一是target: 'node'在构建服务器应用程序（包括所有常见部分，例如组件，因为它是一个同构应用程序）时使用 webpack 中的选项来构建服务器端代码。这应该会生成一个server.js可以由节点运行的构建。

注意：我知道还有其他方法可以解决这个特定问题（例如不使用import/require包含任何不是 javascript 的内容，但在此应用程序的这个开发阶段这是不切实际的。

那么问题是样式加载器使用window的节点环境中显然不存在。

从这里在样式加载器中。

感觉就像我非常接近完成这项工作，所以任何想法都会受到欢迎。

我强调试图让 Uglify 与我的项目一起工作，以前我使用过 Uglify 并且没有出现问题，但现在我认为这与 SASS 相关。

这个错误重复了很多次，每个多捆绑一个。

这是我的 webpack 配置。

如果我评论 uglifyJsPlugin 行，则没有错误。但是我必须进行缩小并且无法使其运行，我尝试了 mangler: false and nothing，不起作用。

使用以下 webpack 配置，我试图缩小入口点 entry.js 中的 css。entry.js 只有 require('mystyles.css')

mystyles.css 有以下 css

在运行 webpack 时出现以下错误

请让我知道我必须使用哪个加载器将所有 .css 文件放入单个 styles.css 文件

我正在尝试编译我的所有.scss文件，但 webpack 似乎没有这样做，即使我已经style-loader & sass-loader在我的 webpack 配置文件中声明了。

我不明白为什么.scss文件无法编译？我遵循了以下博客中的指南：http: //www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

装载机：

style.css永远不会在任何地方生成。

插件：

也试过：

以下内容是从我上面链接的博客中复制的。

装载机：

插件：

其他 webpack 配置：

这是我的其他配置。非常标准，除了.scss！

这是我的 webpack 终端在运行后打印出来的内容：

有没有人对发生的事情有任何想法？！

编辑

忘了补充说我正在做这个服务器端！

我在使用 webpack 加载我的 scss 文件时遇到问题。

我收到此错误：

这是我的 webpack 配置文件：

这是 main.scss：

我在 App.js 入口点导入文件，如下所示：

有小费吗？

如果我有一个 webpack 模块，我该如何配置它以便其他应用程序可以使用它？这有两个部分：

托管此模块以访问所有其他应用程序的正确方法是什么？私有 npm 存储库似乎是一种选择。还要别的吗？

如何将 CLI 参数传递给配置文件，以便它知道根据传递的参数选择或需要哪个资产？例如，传递“red”将获取红色样式表文件。