问题标签 [webpack-style-loader]

我的 webpack 加载器数组中有这个加载器：

我正在尝试让 webpack 将我的 SCSS 构建为 CSS，但出现此错误：

这是我的完整 webpack 配置：

我目前正在开发一个使用不同前端主题的应用程序。这些主题只是用户可以选择的 CSS 文件。

从技术上讲，这些主题是 .scss 文件，它们由 webpack 编译并通过 angular 中的标准链接标签加载：

<link rel="stylesheet", ng-href="themes/{{theme}}.css">

我剥离的 webpack 配置如下所示：

在我想使用启用了热模块替换 (HMR) 功能的 webpack-dev-server 之前，这完全可以正常工作，因为 extractTextPlugin 不支持 HMR。当我简单地禁用 extractTextPlugin (options.disable) 或删除它们时，所有主题都会编译到主模块中，这 - 当然 - 会破坏主题，因为所有主题都被一起应用。

如何在不使用 extractTextPlugin 的情况下直接使用 webpack 生成这些 CSS 文件？我尝试了不同的条目/块、文件加载器等各种尝试，但没有任何效果。

它应该很简单：从 SCSS-Files 生成静态 CSS-Files，而不使用 ExtractTextPlugin 将它们转换为 JS-Files。

如果有人能指出我正确的方向，那就太好了。

我的应用程序.scss

我执行时的输出错误./node_modules/.bin/webpack

我的webpack.config

和我的app.js

如果我有一个反应组件并且我想传入一个类名，我该如何使用 CSS 模块来做到这一点。它目前只给出了 className 而不是我会得到的散列生成的 css 模块名称 <div className={styles.tile + ' ' + styles.blue}>

这是我的Tile.js组件

瓷砖.css

如您所见，我在我的 Author Tile 中按如下方式初始化了这个 Tile 包装器组件，但我想将颜色道具传递给组件：

作者Tile.js

我有两个问题。

1) CSS Loader和Style Loader是两个 webpack 加载器。我无法理解两者之间的区别。当它们都做同样的工作时，为什么我必须使用两个装载机？

2）上述Readme.md文件中提到的这个.useable.less和.useable.css是什么？

我的 webpack 配置指定应使用 加载字体url-loader，当我尝试使用 Chrome 查看页面时，出现以下错误：

我的配置的相关部分如下所示：

它不会在 Safari 中发生，我也没有尝试过 Firefox。

在开发中，我通过 提供文件webpack-dev-server，在生产中，它们被写入磁盘并复制到 S3；在这两种情况下，我在 Chrome 中都会得到相同的行为。

这也会发生在较大的图像上（大于图像加载器配置中的 10kB 限制）。

所以我下载了一个包含一堆文件较少的主题，但有一个以正确顺序导入其他文件的主文件。它带有一个 gulp 文件，可以监视任何 .less 文件，但只重新编译导入所有其他文件的文件。它看起来像这样：

到目前为止，我的 webpackconfig 如下所示：

我正在尝试使用 webpack 完成同样的事情。我已经安装并设置了指南所说的less-loader，但它会尝试编译所有文件。有没有办法像 gulp 文件一样设置它来监视任何文件但只编译特定文件？我在凤凰城工作时在早午餐中工作，但我试图用 webpack for phoenix 切换早午餐。

在早午餐中，我只是告诉它忽略包含较少文件的文件夹，然后将主文件放在该目录之外，因此早午餐只会编译主文件并导入其他文件。

我正在使用 React、Webpack 和 Bootstrap-Sass 创建客户端应用程序。我正在尝试导入外部 Bootstrap-sass 库，但在终端中不断收到以下错误：

我的 webpack.config.js 中的 scss 加载器似乎没有正确读取 bootstrap-sass 中的变量文件；但是，我尝试使用/创建几个不同的 scss 加载器，但没有一个能够解决这个问题。

这是我的 webpack.config.js 文件：

base.scss 文件：

非常感谢任何帮助或建议！

我不知道如何使用 webpack 从 node_modules 库中加载任何 CSS，例如我已经安装了传单并且每次加载尝试都leaflet/dist/leaflet.css失败了。

您能否提供示例如何从 node_modules 加载静态样式？

我当前的 webpack 配置如下。另外我正在使用extract-text-webpack-plugin并且sass-loader我的项目 scss 文件运行良好，我也css-loader有，我是否要解析静态 css 文件或添加一些东西stylePathResolves？

在哪里加载leaflet.css，注释掉require('leaflet/dist/leaflet.css')给我以下错误：

我有大型 AngularJS，我尝试从 Grunt 迁移到 webpack。我无法更改项目的结构，但在当前结构下，我遇到了从较少文件加载图像的问题。我认为我应该将图像路径从相对替换为绝对路径，因为 webpack 尝试从文件较少的子文件夹（样式/组件）加载图像。

这是我的 webpack 配置：

在入口文件（app/scripts/bootstrap.js）中，我有：

但是当我尝试运行开发服务器时，我得到了这些错误：

如何在不重写所有较少文件的情况下修复错误？

我的项目结构

和风格的一部分app/styles/components/commom.less：