问题标签 [sass-loader]

这是我第一次使用Webpack，我不明白为什么我的 sass 文件 ( .scss ) 没有加载。我整个下午都在尝试和搜索，但我不明白我的代码有什么问题。

webpack.config.js

package.json依赖：

在我的app.js中，我添加了这一行：

终端中没有错误，Chrome 控制台中也没有。但是 SASS 文件没有加载。

我的代码有什么问题？

谢谢！

在我的项目中，我将 Webpack 与 React 和 NodeJS 一起使用。我想生成一个bundle.js和style.css文件。目前我有以下代码：

但是当我运行时，地图中webpack 只创建了 JS文件./public：

在示例/教程之后，它仅针对 CSS 文件，或者在未实现 ExtractText 等明显错误的情况下。我也下载了包sass-loader node-sass。在某些示例中，我确实找到了包含的那些包，而在某些示例中却没有。

编辑（需要 index.js 中的样式）：

编辑（webpack.config.js）：

我的文件夹结构如下所示：

尝试将 sass-loader 添加到我的 webpack 配置并遇到错误：

webpack.config：

我已经为 extract() 调用的参数尝试了一堆不同的选项，但没有运气。任何帮助将不胜感激。

我正在尝试这个样板https://github.com/opencredo/opencredo-react-boilerplate，如果项目位于：

“/Users/[my_home]/oc/adminUI”

但是，如果我将此样板移动到我的其他项目的子目录中，路径如下：

/Users/[my_home]/Projects/src/github.com/[user]/[project_name]/adminUI

然后我收到如下错误：

./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]-[local]-[hash:base64:5]!./~/postcss-loader!./~/sass-loader!./~/ 中的错误style-loader!./~/css-loader?sourceMap!./~/postcss-loader!./~/sass-loader!./src/styles/app.scss 模块构建失败：@import 'base'; ^ “...加载样式”后的无效 CSS：预期 1 个选择器或规则，在 /Users/[home]/Projects/src/github.com/[user]/ 中为“content = requi...” [项目]/adminUI/src/styles/app.scss（第 1 行，第 1 列）@ ./src/styles/app.scss 4:14-426 13:2-17:4 14:20-432

• npm 版本：3.6.0
• 节点版本：5.7.0
• 操作系统：OSX 10.11.2

认为 webpack 不应该关心它所在的目录。

编辑：

网络包配置：

试图找到一种方法将 _.global.scss 文件与我的 webpack 构建一起导入一次，而不是在每个 .scss 文件中导入它（每个组件都有一个 scss 文件）。

到目前为止，我发现的唯一可能的解决方案是使用行李装载机，但我无法让它工作。

我的 webpack.config 中的加载器如下所示：

谢谢！

我将 Webpack 2 和 webpack-dev-server 与 Sass 加载器一起使用，实际配置：

这工作得很好，其中引用的图像background: url()由 webpack 处理，并且还替换为类似的样式background-somehash.jpg，该文件可以通过键入来访问http://localhost:8080/background-somehash.jpg。当我使用开发人员工具在样式背景定义中提供整个 url（包括本地主机）时，它也可以工作......

唯一不起作用的是由 webpack 生成的原始 css，看起来像background: url(background-somehash.jpg). 我还尝试了各种 url，例如,./或尝试是否以某种方式设置了不同的 root。我没有得到的是该文件在根目录下很容易获得......../../.././images/

编辑： 当与extract-text-webpack-plugin将样式提取到单独的真实styles.css文件中一起使用时，它工作得很好。问题是为什么当从 javascript bundle 提供最终 css 时它不起作用？

澄清： 一切都被正确引用，图像可用，当我使用它将css提取到单独的文件中时一切正常，只是在提供完全相同的extract-text-webpack-plugincss时不起作用bundle.jsindex.html<link href="blob:..." rel="stylesheet">

我正在努力解决与使用 webpack 将 sass 编译为 css 相关的问题。通过webpack编译scss文件后，生成的css与scss文件为入口点之一的scss文件相同。这意味着 sass-loader 以某种方式无法运行，而没有关于它的错误消息。我不确定我的设置有什么问题。我已尝试使用 Window 7 和 Ubuntu 15，但问题仍然存在

main.js

主要.scss：

bundle.css（编译后的 css）：

webpack.config.js

命令信息：

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

我收到此错误：

这是我的 webpack 配置文件：

这是 main.scss：

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

有小费吗？

我的 Webpack 配置中有以下模块：

您可以看到我正在使用 sass-loader，并且对于 *.scss 文件，我正在定义这个管道：['style', 'css', 'sass'].

然后我有我的 scss 文件：

最后，我的 HTML 页面（在 vue.js 的 VUE 文件中）导入了该 scss 文件：

但不知何故，我在启动项目时遇到了这个错误：

为什么管道会出错？（看起来 webpack 正在尝试处理['css', 'sass', 'style', 'css', 'sass']而不是['style', 'css', 'sass']像在模块中配置的那样。

我究竟做错了什么？

谢谢！

编辑：链接到完整的示例项目：https ://dl.dropboxusercontent.com/u/1066659/dummy.zip

我正在尝试在我的 ReactJS 应用程序中为我的样式表使用 .scss。我有一个 webpack 配置文件css-loader , sass-loader, and style-loader.

我能够将 css 导入到我的 app.js 文件中，import './test.css'但是我没有运气import './test.scss'？

这是我的 package.json：

我的网络包：

****第 3 行被注释掉，因为我想出了如何加载 css。**

在我的 app.js

我已经尝试过require("!style!css!sass!./styles.scss"); 并且也尝试import './styles.scss'过但没有成功。

目前我的错误是Uncaught Error: Cannot find module "./../../node_modules/css-loader/lib/css-base.js"