问题标签 [sass-loader]

有一些帖子使用很多行话来解释这个问题，但是，作为 webpack 2 的新手，我无法理解其借口以及为什么会发生此错误：

我意识到错误显然指向 sass-loader，但我根本不明白如何调试它。

以下是我的 webpack.dev.config.js：

很多帮助将不胜感激。如果需要将其标记为重复，请这样做，但请帮助我了解 sass-loader 到底在哪里搞砸了。

以下是 package.json：

以下是主要入口文件：

I'm trying to import some variables into a .vue component but it won't work, and I suspect a bad configuration of webpack...

.vue

config.js

I see many other have this kind of need, wonder if you ever find a solution. It is nice to have sass into templates, but without variables is pretty useless... (sure, I can just put the absolute path, it works but that's a bad practice thought...)

我有一个 react-redux 应用程序工作得非常好，每次文件更改后 UI 都会自动更新，然后我决定将 sass 插入我的应用程序并且自动重新加载停止工作。所以为了在我的应用程序中获得 sass，我必须安装 sass-loader、node-sass、css-loader 等。但是其中一个加载器需要 webpack 2，所以我从 1.15 切换到 2.0，现在当我运行“ npm run dev" 每次文件更改后我都会看到 webpack 重新编译，但我的 UI 没有在浏览器中自动重新加载。谁能帮我解决这个问题？

这是我的 webpack 配置文件：

这是我的 package.json 文件：

如果这有什么不同，我会在 docker 容器中运行 webpack。

我的 webpack.config.js：

我的 test.js：

我的文件结构：

我的 dockerfile 是：

JS 编译正常，工作正常等。但是，当尝试编译 SCSS 时，它会失败并出现错误：

webpack_require (!(function webpackMissingModule() { var e = new Error("找不到模块\"../styles/test.scss\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())) ;

我已阅读 sass-loader 和 resolve-url-loader 描述，但我仍然不明白为什么 sass-loader 无法解析 sass 文件中的图像路径（url）。

请帮助我怎么能弄清楚！

错误的路径：

wordpress中的错误路径

项目结构

结构体

我有一个处理 sass 的规则：

打字稿加载器

Webpack 成功组装程序集

app.component.ts

但是，当我进入浏览器时，对于标签中的组件，规定了一个sass，没有编译：

sassConfiguration（长线）：

告诉我该怎么做？

Webpack + file-loader + sass-loader 无法解析 CSS 背景图像的相对路径。

/dist/编译后的 SCSS 文件包含一个相对于 SCSS/CSS 文档而不是相对于 SCSS/CSS 文档的背景图像的路径。我研究了这个问题；sass-loader 建议使用 resolve-url-loader（带有源映射）。但是，添加 resolve-url-loader 对编译后的 CSS 没有任何影响。

我已经能够通过在文件加载器上将“publicPath”设置为“../..”来解决这个问题。或者通过禁用 css-loader 上的“url”设置。两者都不是一个好的解决方案，并且会导致通过 HTML 或其他来源复制文件和引用图像时出现问题。

Webpack 和 CSS 的在线示例将 CSS 和图像放在同一个文件夹中（通常在根目录中）。这不是我的 webpack 实现的最佳选择。在子文件夹中结构化文件的概念似乎是一个相当基本的要求。这仅仅是错误的方法吗？

运行 Webpack ^3.5.1。Sass 加载器 ^6.0.6。文件加载器 ^0.11.2。CSS加载器^0.28.4。

文件结构

应用程序.scss

应用程序.css

应用程序.js

webpack.config.js

我想用 webpack 编译 scss 和 js。但是，只要我将它与 Symfony 3 一起使用，其中只有前端的某些页面使用 javascript 组件，我想将 css 编译为独立文件并使用老式<link href="style.css">而不是将 (s)css 导入到 javascript 模块中。

我设法用以下webpack.config.js我应该生产的js/script.js和来做到这一点css/style.css。它有效，但它也产生js/style.js了我不需要也不想要的东西。我想问题是条目“样式”也会产生输出 JS，即使它是由 ExtractTextPlugin 处理的，但是如何告诉 webpack 不要为条目产生 javascript 输出呢？

我还尝试不使用多个入口点，并使用 index.js 将 main.scss 添加到一个入口点列表中。它当然没有产生额外的文件，但是转译的 script.js 包含对 main.scss 的引用，这是我不想要的。我想要一个完全独立于脚本来管理样式的纯解决方案。

大家好，我正在按照https://github.com/yibn2008/fast-sass-loader这个 sass 加载程序的说明进行操作。我选择它的原因是因为我使用的是 webpack 1。目前我的模块看起来像

当我去查看我的本地主机时，我得到了这个错误

不知道问题出在哪里，能否指出我正确的方向或告诉我另一个适用于 webpack 1 的 sass 加载器？

更新 1 我意识到在我的导入语句中，当我这样做时，'!style!css-loader!fast-sass!'它是有效的，但我不想每次都这样做。为什么 webpack 中的 loader 不工作？

如何使用 sass-loader 从 scss 生成 css 文件并使用 express.js 将其嵌入到 html 中。我也在使用 react-hot-loader

下面是我的配置文件

index.js

我从来没有看到下面的插件在起作用

执行

webpack -d 或 webpack 不会在 /build 下生成 payload.css 文件

索引.html

我的目录结构