问题标签 [sass-loader]

我正在使用 sass-loader 将我的 scss 文件加载到我的项目中，并使用 node_modules 解析器，例如：@import '~styleguide/src/vars.scss'

当我尝试加载 react-storybook 时，我将其传递给webpack.config.js

从我可以从sass-loadernode_module 中读取的内容，解析应该是自动的，但它似乎不起作用：

这是错误消息

任何人都知道为什么会这样？

我已经阅读了太多该死的教程、票证等，但我无法解决它……我有一个带有 webpack 的 React 项目。我尝试使用 .scss 文件进行样式设置。所以我有这个 webpack.config.js：

和一个App.scss文件src/：

比index.html我包含的css文件：

比我打电话webpack-dev-server --inline --hot --quiet。比 chrome 总是告诉我它找不到 css 文件，而且似乎 webpack 只是不关心我的 scss 文件....

我的 package.json 依赖项将是：

在没有太多关于 webpack 的知识的情况下，我试图使用 string-replace-loader ( https://www.npmjs.com/package/string-replace-loader ) 替换 SASS 部分中的一些字符串。

我的 webpack 配置看起来像这样

据我了解，它将所有以“.scss”结尾的文件中的“mySearch”替换为“replaceWith”。

但是，SASS 部分不会被替换。只有没有下划线的文件。我可以通过使用调试加载器（https://www.npmjs.com/package/debug-loader）看到这一点，因为带有下划线的文件甚至没有加载。

如何确保这些文件也被加载？

我刚刚开始研究 webpack，但是当我尝试从 index.scss 文件中包含 bootstrap-sass 时，它现在已经很合适了。

这个 webpack conf 效果很好，并输出一个 .css 文件到 css/stylehseet.css

问题是，在 index.scss 中我必须包含 bootstrap-sass。index.scss，根据https://www.npmjs.com/package/sass-loader#imports添加一个 ~ 然后 webpack 应该解决它：

问题在于我的尝试不是：/。我得到输出：

Webpack 相当强大，但它确实需要你绕着房子走……这是我的 package.json 文件

有什么我想念的小东西，任何人都可以发现:)？

在我的项目中，我包含一个 CSS 文件和一个 SCSS 文件：

CSS的源映射- 工作正常：

SCSS的源映射- 损坏（所有规则都指向同一行，指向父元素 - body）

编辑：我知道我不是唯一一个有这个问题的人。

sass-loader 版本：4.1.1

节点萨斯版本：4.1.1

网络包：1.14

节点版本：7.3

我看到我的 sass-loader 构建仅在 linux 上失败（在 mac 上很好），但也不是每次都失败。我不完全确定这是 sass 问题还是 sass-loader 问题。它似乎与 webpack 配置有关，但我真的看不出有什么问题。我正在使用提取 webpack 文本插件，但是没有它也会发生同样的错误。

这似乎与让 2 个入口点引用同一组 sass 有关。

在我的根级别，我有 2 个 sass 文件，main.scss 和 alternate.scss

文件夹 1 或 2 中的所有东西都没有任何导入。

我的 webpack 配置入口点看起来像这样

导致错误的 mixin 看起来像这样

这是我的样式加载器配置：

在我的源 scss 文件中，我有这个：

我收到此错误：

模块解析失败：/client/fonts/icomoon.svg?-cvpazo 意外令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型。

Webpack 无法加载 font-face 声明，我需要在这里做什么才能让 font-face 工作？

在使用 webpack 和 sass-loader/style-loader/css-loader 时，我无法让浏览器成功找到背景图像。

路径似乎是正确的，因为每当我更改它时，编译过程都会失败，但事实上，没关系。

到目前为止，我已经...

零件

CSS

事实上，div 是透明的。容器在那里，但背景图像无法加载。我是在 Webpack 中编译 SASS 的新手，所以这可能与我的文件结构有关。

这是我的文件树的相关部分：

我正在将其app.scss导入我的主 js 文件app-client.js（React 安装到应用程序）。

css 属性中给出的路径是否background-image需要相对于根目录或样式表？我假设根目录（/static）。

任何帮助表示赞赏。

更新

文件树

webpack.config.js

包.json

我已将 webpack 配置为使用 ExtractTextPlugin 从 sass 生成单个 css 文件，并允许它通过 webpack 加载器导入在 reactjs 应用程序中可用。

sass 文件的使用是通过 react 组件中的 import 语句检测到的，并且正在生成一个输出文件，但是生成的 main.css 文件是空的，并且导入返回一个空样式对象，有人知道我是什么吗做错了吗？

结构

Webpack 配置

导航栏.scss

导航栏.js

症状

装载机和进口（不再是问题，请参阅下面的答案）

1. console.log(styles) = 对象 {}

2. 样式.navbar = 未定义

插件

1. public/styles/main.css 为空（不再是问题，请参阅下面的答案）

问题

1. 为什么在 Narbar.js 中导入样式时它是一个空对象？我配置错了什么？（我已经找到了解决方案，并在下面的答案部分提供了答案）
2. 为什么 public/style/main.css 是空的？（我已经找到了解决方案，并在下面的答案部分提供了答案）

由于某种原因box-shadow，mixin 返回的值被浏览器视为无效。为什么会这样？怎么修？

在我的.scss：

返回这个：

我将 compass 与 webpacksass和css加载器一起使用。这是<script>标签中返回的内容：

更新：

看起来这是node-sass问题。sass-loader正在使用node-sass且node-sass与 Compass 不兼容。https://github.com/sass/node-sass/issues/1004