问题标签 [webpack-style-loader]

我是整个 Node/NPM/Webpack 世界的新手，如果这很明显，我深表歉意。

我正在尝试构建一个与 Webpack 捆绑的简单前端项目。我已经安装了节点，并配置了一个 package.json 文件。如果我在我的根目录中运行“npm start”，我不会从控制台收到任何错误，并且我可以在浏览器中转到“localhost:3000”并查看我的“hello, world”输出。

我的下一个任务是包含一个样式表，其中包含对图像的引用，如下所示：

.myimg {background: url(path/to/file.jpg);}

通过这样的设置，我可以通过 webpack-dev-server 查看图像（通过在 Web 浏览器中访问 localhost:3000），但是如果我构建项目，图像的路径是错误的。我不知道我做错了什么，所以我把它扔到了 Stackiverse，希望有人知道我在做什么愚蠢的事情。

这是我的 package.json 文件：

...这是我的 webpack.config.js 文件：

...然后是 index.html 文件：

...配置文件中引用的“start.js”文件：

...最后是 css 文件本身的内容：

就像我在顶部所说的那样，在 webpack-dev-server 世界中，图像的路径可以正确解析，并显示为 DOM 元素的背景。在已发布的世界中，浏览器告诉我找不到文件，Safari 的控制台清楚地显示了错误的文件路径：

正确的本地路径是这样的：

显然，我做错了什么，但我不知道是什么。任何帮助或建议表示赞赏。

谢谢！

有没有办法尝试为每个加载的xx.js加载xx.less？

现在，我们require 'xx.less'在每个相关的 js 文件的顶部添加它，它有点难看。

在同一个文件中使用 css 和 sass 导入时，生成的 css 的顺序不正确。

完整的例子可以在这里看到和复制：https ://github.com/p0wl/webpack-jimdo-example/tree/master/sass-order

鉴于我们有以下设置：

输出：

.middle是第一条规则，尽管它不是第一条导入。.some需要成为第一条规则，因为它是第一个导入。

webpack.config.js（摘录）：

webpack 和所有加载器都是最新版本。

我试图将 SASS 编译为 CSS，但它不起作用。Webpack 不会生成 css 文件。也许 webpack 配置中的某些东西是错误的，因为当我尝试这个项目时，它起作用了。

webpack.config.js

包.json

项目结构

webpack-dev-server 的输出

我正在制作一个简单的 html 和 CSS 应用程序。我需要更改我的 SASS 以显示在我正在开发的 LIVE 网站上。

一旦所有的 SASS 和开发完成，我将运行webpack -bwebpack 并将 SASS 转换为 CSS。

我敢肯定以前有人这样做过。谢谢。

我已经让 Webpack 使用style-loaderand sass-loader，但无法弄清楚一件事：

我有两个单独的“样式表”包（我们的普通应用程序和客户端的自定义皮肤版本）。如果我单独需要它们，它仍然会以 1 个文件（bundle.css）的形式输出。我还尝试将 sass 源文件设置为入口点，但这给了我这个错误：

对于两个样式表入口点。有谁知道如何使用 Webpack 完成此任务？

我正在尝试使用 sass-loader 将我们的 SASS 构建从 gulp + node-sass 移动到 webpack。

作为参考，gulp + node-sass 3.2 给了我们大约 2.5-3 秒的构建时间。

在 webpack 中，如果我使用 style!raw!sass 进行加载，我正在查看 10~ 第二次构建，并且没有源映射（因为原始加载程序）。如果我让 sourcemaps 的 css 加载器工作，额外的解析会使构建在美好的一天需要 20-30 秒。

我想知道我可以使用什么技巧来改进事情。现在我能做的最好的事情就是将我们的 sass 编译拆分为从 javascript 到 SASS 的大量 require(...)，然后将它们连接到一个文件中。使用 -watch 选项，允许进行一些虚假增量编译，因此在初始构建之后，它还不错。

我想知道除此之外我还能做些什么来让它变得更好。比 gulp + nodeass 慢 10 倍不是很好，但是拥有 2 个构建工具也不是很好（webpack 对 JS 工作 100% 好，即使有大量代码）

我想在我的开发设置中使用带有函数的css-loader 。:local()

没有错误： import './sidebar.css';

它编译没有问题，但是我不知道如何访问我.tsx文件中的本地类名。

错误： import classNames from './sidebar.css';

我在这里得到：error TS2307: Cannot find module './sidebar.css'

解释我的设置：

1. .tsx文件通过 gulp-typescript (ES5) 编译成 commonjs 模块
2. commonjs 模块通过 webpack 编译并缩小为 JS

sidebar.tsx（app.tsx如果重要，则导入）

import classNames from './sidebar.css';

侧边栏.css

gulpfile.js

Gulp 任务将.tsx文件编译为 commonJS 模块（当然在 webpack-task 之前运行）：

我的 gulp-webpack 任务：

我究竟做错了什么？

编辑：我刚刚发现： https ://github.com/Microsoft/TypeScript/issues/2709 但我不太明白。这是否意味着我必须将我的 CSS 声明为模块？

如何.scss使用 webpack 构建我的？我可以找到更少的加载器和 css 加载器，但找不到 scss。这和萨斯一样吗？我不断被引用到 Sass，但语法不同

我正在尝试使用Webpack对Bootstrap和Font-awesome做一个简单的要求。我设法加载了 Bootstrap CSS，但 Font-awesome 无法正常工作。

这是我得到的结果：

我的代码如下。我在这里做错了什么？

资源：此处提供Github 代码。

包.json

入口点：index.js

Webpack 配置文件webpack.config.js