问题标签 [sass-loader]

当尝试设置 SCSS 以使用 Webpack 在我的 React 应用程序上运行样式时，我遇到了错误：

在浏览器中：

我的 webpack.config.js 配置如下：

我的 package.json：

我要导入 main.scss 的 index.js （产生错误）：

我所有的 scss 文件都在我的样式文件夹中，但是，我似乎无法将它们导入我的 index.js 并返回“找不到模块”错误。

这是我的文件夹结构：

任何帮助表示赞赏！

我想将一个特定的选择器全局附加到我的应用程序中使用的所有 CSS 选择器。

我正在使用 React 和那些 Webpack 加载post-css器css-loader、sass-loader和extract-text-webpack-plugin.

我不想在 jsx 文件中编辑我的所有类名。我只想在构建时附加这个特定的选择器。

有没有加载器来实现这一点？或任何其他解决方案...

我实际拥有的：

Webpack 转译后我想要的：

谢谢

戈蒂埃

PS：我需要这个功能的原因是为了避免 CSS 选择器与我正在集成我的应用程序的网站发生冲突。我不想手动编辑我所有的 scss 文件来附加选择器。

我正在尝试通过 webpack 编译我的 Sass。编译普通的 sass 很好，但我得到一个错误。

有没有办法解决这个问题？或者，有没有办法将 sass 编译器的级别设置为不那么严格，以忽略某些错误

以下是我当前的配置。

我正在尝试让 webpack 编译和提供 scss 文件。不幸的是，无论我做什么和更改 *.scss 文件都不会被解析。webpack 所做的唯一一件事就是生成一个 bundle.js 文件，该文件服务于所有 js 内容。我不太确定这个配置有什么问题。

使用以下源树：

我在 React.js 中有一个带有 SASS 并使用 Webpack 1 的项目。

我有包含所有图像和其他资产文件夹的图像文件夹。

我不希望 webpack 对图像做任何事情，我希望它们在运行时通过 url 加载。我通过在 jsx 代码中使用内联的图像 url（而不是导入它们）在 JSX 中解决了它，它工作得很好。

但是当我尝试在 SASS 中做同样的事情时，情况就不同了：我曾经在 absolute pass /images/abc.png 中引用它们并且它起作用了。我什至没有为他们提供 webpack 加载器，它只是工作。但是我不得不将它更改为相对路径 ../../www/images/abc.png 并且一切都崩溃了：它拒绝在没有 webpack 加载器的情况下工作 - 只是为每个图像提供错误。我试过使用文件加载器，但它会将所有 sass 使用过的图像复制到构建文件夹中。我尝试过使用 url-loader，但它只是将图像包含到生成的 css 文件中，使其非常臃肿。

那么，我可以用什么来忽略来自 sass 的图像并在运行时通过 url 来处理它们？

谢谢

我正在开发 2 个 Angular 2 库：

1. carbonldp-工作台
2. carbonldp面板

项目2（面板）：

是正在导出的组件和模块的集合。这些组件有自己的模板和 scss 文件。该库是用 Typescript 编写的，但dist正在编译文件，因此该库作为一个npm包提供，其中包含其自己的.js文件.metadata.json及其.d.ts文件。

项目 1（工作台）

是主要项目。它使用Project2，所以它可以工作。这个项目使用 Webpack 来打包最终的应用程序。问题是我无法让 webpack 与 Project2 (Panel) 一起工作，因为主项目是用 typescript 编写的，而 panel 仅使用 javascript 文件导入。我从 webapack 得到的错误是无法找到 Project2 中的所有模板文件。见下文：

这就是最终 app.js 捆绑Project2库的方式，请注意来自Project2的头组件是如何导入模板文件的：

并注意 webpack 如何从主项目Project1（用 ts 编写）导入模板和样式文件：

这就是我在webpack.config.js文件中定义解析扩展名的规则的方式：

这里的问题是......我怎样才能让 Webpack 也编译我的 Angular js 库的导入？

我正在通过 Webpack 2 构建一个 React 应用程序，通过 SASS-loader 和 CSS-loader 生成 CSS。这是我的 Webpack 2 配置：

我正在将生成的 CSS 写入文件，同时允许我的 React 应用程序在 Javascript 对象中获取生成的类名，以分配给各种 HTML 元素。

我看到的一个怪癖是没有保留空类（不包含实际样式的类选择器），并且在生成时从类列表中丢弃。我读过 CSS-loader 使用 CSSNano，它的配置默认通过缩小删除未使用/空的类。

根据 CSS-Loader 的文档，您可以通过选项设置 CSSNanominimize选项。这就是为什么我根据 CSSNano 的选项文档将 safe 设置为 true 的原因。

不幸的是，仍然没有保留空/未使用的类。我想知道我是否正确地通过了 CSSNano 选项。

关于为什么空类不存在的任何想法？

我有关于像这样的样式文件的项目结构：

在所有 style.scss 文件中，都有特定组件的本地样式。

在 config-style.scss 中有所有其他文件使用的变量，例如：

实际上，我使用以下命令在每个 style.scss 文件中导入 config-style.scss 文件：

我还使用 webpack 生成带有 ExtractTextPlugin 的 main.scss 文件

有没有办法告诉 webpack在所有其他 .scss 文件中自动包含config-style.scss ？

运行 webpack 时我有下一个 webpack 2 规则配置抛出下一个错误：

¿ 怎么了？

:)

感谢帮助

我有一个名为DropdownMenu.ts的打字稿文件，看起来像这样

我正在使用sass-loader并css-loader处理 sass 文件并为其输出一个单独的 css 文件。如果我注释掉 sass 样式表的导入语句，webpack 的 CommonsChunkPlugin 会使用正确数量的代码生成包。但是，如果我删除样式表的 import 语句上的注释，然后查看为这个 typescript 模块生成的名为DropdownMenu.js的捆绑文件，webpack 为 css 加载器添加了大量代码来工作。有没有办法删除这些代码或者有可能吗？