webpack 配置了sass-loader模块来处理.scss文件。这是配置文件中的块：

你可能已经猜到了，我使用 ReactJS 和 hot-reloader。我希望构建应用程序的方式比不同教程中通常提供的模块化得多（每个组件都应该style.scss在同一个文件夹中有自己的文件）。所以目前的文件夹结构是这样的：

• _base.scss
• _variables.scss
• _components.scss

最后一个有@import来自所有style.scsss 的 s 埋在远处其他文件夹的某个地方。显然，我将所有变量和 mixins 的导入以及基本的东西放在所有其他使用某些变量的导入之上。对我来说不明显的是为什么在构建过程中我收到错误消息，它找不到变量。在这种情况下，Webpacks' 如何sass-loader定义@imports 的顺序？我应该怎么做才能使样式表导入的结构更清晰？我想总体上实现两个目标：1）分别保留具有自己样式的组件和 2）使可维护性不那么痛苦。

旁注： 我还考虑了一些帮助函数，它们允许@import在每个捆绑上创建一个新的 s 列表：

像这样的东西。但根据我的直觉，这不是最好的解决方案:)。

我的项目结构如下：

我有以下 webpack 配置文件：

并打开我的 entry.js 文件

我知道这种特定的安排可能不起作用，但我已经尝试了一个多小时的不同排列、设置和配置，但似乎无法让 webpack 找到我的 .scss 文件。

有人可以告诉我在我的情况下应该如何设置 webpack 配置文件吗？

干杯。

编辑，

试图在我的要求中上升两个级别，

仍然给我，

同样对于

当我跑

我收到以下错误：

所以很明显webpack不理解我的sass/less文件，我不确定我在 webpack 配置中缺少什么。我需要将skeleton.scss导入的文件输出到文件public/css/style.css

骨架.scss

包.json

webpack.config.json

任何帮助将不胜感激！

我正在使用 webpack，我想在我的 JavaScript 中加载 scss 文件。（或者如果它可以分开，它也可以）。

这是我的 webpack 配置：

这是我的文件列表：

• src/html/index.html -> build/html/index.html（工作）
• src/images/** -> build/images/**（已工作）
• src/js/index.js -> build/js/app.bundle.js（工作）
• src/scss/** -> build/css/** （不工作）

这是我的 JavaScript 代码。我刚开始项目，所以代码不多：

你可以看到这个：import "view/startup.scss"; 我想将 scss 文件加载到我的 JavaScript 中，但是当我运行 webpack 命令时，它说：

Loader /Users/.../Desktop/work/my-project/app/node_modules/css/index.js 中的错误没有返回函数@ ./scss/view/startup.scss 4:14-123

在 webpack 配置的“resolve”属性中，你可以看到我为 scss 添加了另一个根目录，我也加载了 sass-loader，但它不起作用，我不知道为什么。

据我所知，使用 Webpack，包括 css/scss 会自动注入到目标文件中，因此是否需要将其提取为单独的文件并不重要，我只是希望它能够正常工作。

任何帮助将不胜感激:)

* 更新 * ./scss/view/startup.scss 的代码

对我的 SCSS 文件的更改，虽然适当地加载到页面上，但会导致整个页面重新加载，而不是 css 的 HMR（更改的样式表的热模块替换）。如何让 HMR 与 Angular2 一起工作？

适用的 webpack 配置（autoprefixer 的 postcss）：

组件样式实现：

我有一个问题，我整天都在挠头。我将 Angular 2 与 webpack 和 SASS 一起使用，到目前为止它运行良好，直到我在项目中添加了我的第一个 *.png 图像。

我有以下 webpack 配置：

当我尝试运行它时，webpack 会生成以下错误：

和我的 sass 文件：

如果我删除背景图像一切正常。

我在 Angular 组件中导入 sass 文件的方式：

我对 Angular 1 应用程序使用了类似的配置，并且它工作了一个。我只是困惑为什么它不适用于此设置。

我在 Python 和 Flask 方面有超过 10 年的经验，主要关注后端和很少的 HTML + JavaScript，但是零 CSS。大约 6 周前，我开始使用 React 和 JavaScript，并使用不需要太多样式的 react 制作了简单的应用程序。但是，现在我需要使用索环进行样式设计，使用 React 做一个体面的项目。

我从 react-boilerplate 1开始。在阅读了 react-boilerplate scss 文档和 //github.com/grommet/grommet-standalone 自述文件后，我的理解是，我需要更改 webpack 配置以使 scss 加载程序正常工作。

我的环境是 win8.1 x64，节点 6.4.0

这是我改变的。

1. 都安装了sass-loader&node-sass

2. 在internals\webpack\webpack.dev.babel.js改变

至

注意额外的 !sass-loader 根据 //github.com/mxstbr/react-boilerplate/blob/master/docs/css/sass.md

3. 将以下内容添加到internals\webpack\webpack.base.babel.js

{ test: /\.scss$/, loader: 'style!css!sass?outputStyle=compressed' }

@ 第 40 行就在 css 块下方，并且

@line 62[ 第 58 行，如果你在 master 分支中查看 @github 源代码 //github.com/mxstbr/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js，+4 是因为为 scss 块添加了 4 行]

4. '.scss'在resolve.extenstions数组中添加的同一个文件中。

5. 现在，在这些更改之后，我运行 npm start 并将以下行添加到app\containers\App\index.jsNow 在这些更改之后，我运行 npm start 并将以下行添加到 app\containers\App\index.js

   import 'grommet/scss/vanilla/index';

根据此处的文档 //github.com/grommet/grommet-standalone

在 cmd.exe 控制台中，我收到以下错误

不用说已经安装了索环，并且文件存在于带有 scss 扩展的所需位置。我当然可以使用扩展名导入，因为import 'grommet/scss/vanilla/index.scss我收到以下错误

我在这里遗漏了一些非常明显的东西吗？看起来好像 scss 加载程序不工作。如果您已成功使用带有 react-boilerplate 的扣眼，请发布您所做的更改。

PS：Stack Overflow 告诉我，我不能发布两个以上的链接，所以我修改了链接以省略 https: 从 url，请手动添加。

我目前正在尝试让 sass 与我的 webpack 应用程序一起工作。我已经成功配置style-loader& css-loader。但是，当我尝试实施时，sass-loader我收到以下错误：

让我带您完成我如何安装style-loader&的步骤css-loader。

1. 冉npm install style-loader css-loader --save-dev

2. 在 webpack.config 中添加了加载器：

   /li>

3. 创建css文件夹并放置在那里myStyle.css

4. 将样式表导入反应组件require(../../css/myStyle.css

这行得通，我没有任何问题。在此之后，我尝试添加sass-loader. 我采取的步骤与第一步非常相似。

1. 冉npm install sass-loader node-sass --save-dev

2. 将加载器添加到 webpack.config

   /li>

3. 更改myStyle.css为myStyle.scss。

4. 将样式表导入反应组件require('../../myStyle.scss')

在此之后，我收到上面粘贴在 DOM 中的错误。这是控制台向我发出的错误：

任何建议或帮助将不胜感激。现在我要睡觉了，明天早上再回来检查。祝大家编码愉快，祝大家晚安！

我正在对 React 进行一些调查，并开始尝试使用 sass-loader 来处理 CSS/SCSS 模块。我已经完成了大部分设置，但是我遇到了一个我不确定如何解决的问题，我在以下场景中介绍了它：

组件A.jsx

组件B.jsx

webpack.config.js

从这个设置中，Webpack 按预期工作并创建了新文件style.css（当然，实际上我正在开发中），但是...... SCSS 内容文件没有按照我认为的顺序呈现。

生成的style.css内容排列为：

• ComponentB.scss 内容
• ComponentA.scss 内容

代替：

• ComponentA.scss 内容
• ComponentB.scss 内容

正如我的意思是它在层次结构上。这是一个问题，因为对于覆盖Component A基本 CSS，我需要 webpack 和 sass-loader 以按层次结构顺序合并文件。

因此，在此之后，问题将是：

如何配置 sass-loader 以在模块通过树时加载模块？

甚至更简单...

有一个更好的方法吗？

我只想在我的项目中使用 MDL 的布局组件。

所以，在我的app.css文件中，我正在导入这个：

@import url('~material-design-lite/src/layout/_layout.scss');

在构建过程中，我收到以下错误：

_layout.sccs从这些行开始

有什么想法我可能做错了吗？

我的相关部分webpack.config.js：

相关依赖：

更新

我尝试了@import url('~material-design-lite/src/material-design-lite.scss');，因为这不是部分的，所以在我修改为只导入布局组件之后。

现在我收到以下错误：

它在评论上失败了。我不知道如何解决这个问题，我尝试使用postcssandpostcss-scss加载器和postcss-strip-inline-comments插件无济于事；旧的错误只是被新的错误所取代。