问题标签 [sass-loader]

我有以下文件夹设置：

在我的webpack.config.js中，我有以下加载程序来处理 scss 和 css：

这里的想法是 css-loader 使用模块基本上将类名重写为.red随机的东西.JHSKJasdasa，但是，我希望它排除/lib文件夹并保留其中的类与它们相同（香草），但仍然是网格内的类.css 之类的.container变得随机化。

我使用 webpack 来配置我的 angular2 应用程序包。

我使用 sass 来设计页面。

为组件样式解析 sass 的 loader 链是：raw!sass

当我将它用于开发而不进行缩小时，它工作得很好。

当我使用 UglifyJS 插件时，它破坏了设计，我看到它改变了导入的 css 类的类位置。

我的组件：

我的 webpack 样式配置：

scss 文件：

当我使用 UglifyJS 时，它会弄乱来自物化库的类的顺序。

如果我编译 scss 文件并需要 css 文件，它工作得很好，但是如果我更改_colors.scss文件中的某些内容，我将需要自己编译 scss 文件，因为 webpack 不知道要查找它。

谁能帮我？谢谢！

我已经设法使用 webpack 配置和使用波旁威士忌。我刚刚在 sass loader 中包含以下内容

在 SCSS 文件中，我只是这样做

我现在可以工作了，因为我通过 scss 文件调用 mixins 并且我看到了输出，而且 webpack 也没有抱怨。

问题是，在 WebStorm IDE 中，它指出上述@import波旁威士忌无法解决。

我试着做

这让 WebStorm 很高兴，但 webpack 失败了

也许这里的错误是 WebStorm，有什么方法可以强制 WebStorm 理解 @import bourbon 是有效的？

我正在base.scss像这样加载我的实用程序和资产

我的应用程序中有大量模块，我们正在对这些模块进行大量更改。
因此，base.scss在每个 scss 文件的标头中导入 会造成很多麻烦，而且看起来非常多余。

我尝试使用 sass 的includePaths但它没有帮助，因为它只解决了 @import 声明。

有什么方法可以自动导入我的实用程序，而不必在每个文件中手动 @import 它？

我尝试使用 webpack sass-loader加载.scss包含背景图像的文件。一部分.scss就像

我的 webpack 配置文件中的相应加载器设置为

我的.scss文件在src/app/components/login/，图像在src/images/. webpack 输出文件夹dist与文件夹同级src。

问题是当我使用时background: url(require("../../../images/cloud_two.png"));，没有错误但背景图像没有显示。

如果我使用background: url("../../../images/cloud_two.png");，则会出现 404 错误抱怨http://localhost:8080/images/cloud_two.png。

sass-loader的自述文件有一个Problems with url(...)部分，但它无法解决我的问题。

我对 webpack 完全陌生（从那时起就一直在使用 gulp）。

但是，我刚刚决定使用 webpack。决定使用 webpack 2（目前为 2.1.0-beta.20）。一直在寻找，仍然无法完成一个简单的任务，例如“给 webpack 我的bootstrap.scss文件（它会导入所有其他需要的引导程序部分 scss 文件）并返回bootstrap.custom.min.css和bootstrap.custom.min.css.map”。

我有我自己的bootstrap.scss文件，它只从引导程序中导入我需要的东西（而不是全部使用），但是在custom-variables.scss顶部导入了一个自定义文件之后，覆盖了一些默认的引导程序变量——比如颜色、网格列等。无论如何，我确定这不相关...问题是使用自定义输出文件名和源映射进行编译scss。css

并不是说它会有所作为，但首先，这是我的习惯bootstrap.scss：

除此之外，我也有我自己style.scss的，我需要做同样的事情（返回style.min.css和style.min.css.map）。

至于我的webpack.config.js文件，这就是我所拥有的：

这些是我安装的所有相关软件包：

如果我使用 <2.x 的 extract-text-webpack-plugin 版本，则会出现其他错误，它与 webpack 2 不兼容。

所以，上面代码中的小步骤......只需尝试至少获取我的bootstrap.scss并style.scss转换为 2 个单独的 css 文件：bootstrap.custom.min.css并且style.min.css（还不知道如何处理源映射）。

这就是我在搜索谷歌并尝试遵循一些示例后所能想到的。没有可靠的教程可以让我了解如何使用 webpack 来完成我需要完成的工作。我只是在这里猜测，蒙着眼睛。

但是当我webpack在控制台中输入并按 Enter 时，我没有得到任何 css 文件，而是得到以下 3 个文件：

1. bootstrap.css- 与源内容完全相同 bootstrap.scss，就像它只是将文件内容复制过来，而不是将 scss 编译为 css；
2. bootstrap.custom.min.js其中有一堆javascript代码；
3. style.min.js- 其中也有一堆 javascript 代码。

我被困在这里好几天了，甚至没有得到我需要的所有其他东西（源地图和我为 css 文件和 css.map 文件选择的目标文件夹）。

我正在尝试加载图像：

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

这是我的 webpack.config：

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

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

任何人都可以帮忙吗？

这是我的目录结构：

和：

和：

加载单级路由时，我的图像链接正常工作。

例如，/search在图像链接被渲染为url(images/img-75fa3d.png)和作品。

但是，如果我转到嵌套路由（通过 React 路由器），例如/properties/1图像链接是相同的，并且无法找到正确的图像位置，因为它是一个相对链接：url(images/img-75fa3d.png).

此示例中的图像是logo-b-green.png.

编辑：

我将其添加publicPath到该output部分并且它起作用了，现在网址进入了根目录。有人可以确认这是处理此问题的正确方法吗？

我即将为我的公司创建一个模式库。我正在使用以下软件：

• css-loader@0.23.1
• 提取-文本-webpack-plugin@1.0.1
• 节点-sass@3.8.0
• sass-loader@4.0.0
• 样式加载器@0.13.1
• webpack@1.13.2
• 解析 url-loader@1.6.0
• 节点@6.3.1
• npm@3.10.3

在我的电脑上（Windows 10）。

我的目标是使用该@import "colors"语句并获取相应的文件../patterns/globals/_colors.css。我尝试了includePaths带有属性的 sass-loader 和 resolve-url-loader 的配置root。但到目前为止都没有工作......

在我第一次使用 sass-loader 和 includePaths 运行时，我得到了以下错误报告：

在我第二次使用 resolve-url-loader 运行后，我收到了另一个错误报告：

二、尝试编译一个简单的sass，内容如下：

使用提到的 webpack 配置，我没有收到错误消息，但收到了无效的 CSS 代码，如下所示：

我不明白我失败的根源在哪里。

最好的问候， JBrieske

编辑：在@IRus 的帮助下，我设法解决了我的问题。

我一直在查看文档并检查其他人的问题，但我找不到如何将我的所有 sass 编译成一个简单的 css 文件并指定我希望生成的 css 文件输出到的目录的简单答案。

对于快速上下文：我有一个公共目录，其中包含一个样式表目录和一个构建目录。webpack 将应用程序编译成 build，我想让 sass 将 style.css 编译到 stylesheets 目录中。

这是我的公共目录的屏幕截图：

公共目录img

我希望能够在我的 webpack.config.js 中执行类似的操作（为简洁起见，仅显示相关代码）：

...

内部模块加载器：

在插件中：

我希望能够使用位于公共目录中的 index.html 文件中的这一行访问输出文件：

我目前正在使用 gulp 执行此操作，并且效果很好，我只是想将所有内容都转换为 webpack。任何帮助将不胜感激！