问题标签 [extract-text-plugin]

我是 ReactJS 的新手。我正在尝试使用 scss 使用 sass-loaders 做出反应

我的 webpack 配置看起来像这样-

所有这些配置都来自那里的相应文档。

.

当我运行 webpack-dev-server 它显示以下输出-

这是我保存 scss 文件时的屏幕 - 注意- 我已经从我的 webpack 配置文件中删除了 ExtractTextPlugin。

目录结构-

我只是不知道它是如何不导入到渲染的反应应用程序中的。我认为如下所示在 index.jsx 中导入 scss 文件会使 css 文件成为依赖项，但它不起作用。

为什么？

已编辑

包.json

我正在尝试使用https://github.com/webpack-contrib/extract-text-webpack-plugin来获取混合 css 文件。

以我目前的情况，我有这个：

如您所见，我有我的 js 文件、我的字体但没有 css 文件的迹象……我尝试了几个在他们的 github 问题或他们的文档中找到的示例，但仍然没有结果。

我的 package.json ：

我的 webpack.config.js ：

我的 app.js（只有几个需要和一个用于测试的 console.log）：

我尝试为我的 vue2 应用程序设置 webpack 配置。它还应该从 sass 创建 css。所以我看看 laravel 的 mix 插件来创建我自己的 webpack 配置。它工作正常，但是当我在我的 sass 文件 ( @import "~font-awesome/scss/font-awesome";) 中包含 font awesome 时，我收到此错误：

Webpack 应该会自动将 FA 字体文件复制到[PATH]\client\fonts\laravel-mix 中。我尝试了很多解决方案，但没有一个奏效。我的webpack.config.js样子：

我正在尝试学习如何使用提取文本插件，我发现了这个例子：

为什么"css"用作装载机？我试图查看文档，但仍然无法理解这一点。

预先感谢大家的帮助。

我看到了FlipKart，他们对所有的 classNames 和它的 CSSes 进行了哈希处理。我知道他们使用 SCSS 来构建 CSS。如何配置我的 WebPack 以使我的导出类似于他们的：

这是我的 webpack：

但它只是散列我在 CSS 文件中的类名，而 DOM 中的类名是开发版本，例如 DOM 中的类名元素之一是product__bag--red，它在 CSS 文件中的类名是_1x4.

我如何为我看到_1x4的而不是product__bag--red在 DOM 中配置 webpack 或 extract-text-plugin？

所以我的 webpack 2 配置中有以下代码。除了改变我的css类名之外，它似乎还有效。

模块：

插件：

CSS 在 global.css 中输出：

这是怎么回事？

需要注意的是，我发现如果我将模块 ExtractTextPlugin 更改为看起来像这样它不会对 css 类名执行此操作并且看起来很好：

所以我真的很好奇发生了什么？

希望有人有想法。

我想要两个文件，一个用于移动设备，一个用于台式机/平板电脑。我还没有找到任何使用 webpack 的解决方案。

目前，我将我的 css 包含在 js 代码中，如下所示：

这是我当前的 webpack 配置：

这是一个示例 scss 文件：

我想在我的 sass 文件中使用$isWide和$isMobile来分隔输出。但以目前的方式，我只有一个文件 application-desktop.min.css

任何想法或另一种/更好的方式？谢谢！

问候疯狂x13th

我一直ts-loader在 Webpack 中使用。我还想ExtractTextPlugin结合使用css-loader来捆绑 CSS。但是，当与它一起使用时，ExtractTextPlugin似乎被忽略或覆盖。ts-loader我在下面包含了一个示例 webpack.config.js。有可能解决这个问题吗？

更新

当出现 TypeScript 错误时，似乎ExtractTextPlugin不会在此上下文中运行。这可以通过修复这些错误来解决。一个不太优雅的解决方案是将导入样式的文件更改.ts为.js. 这会将其从 TypeScript 中删除，因此错误不会阻止ExtractTextPlugin运行。

我在捆绑我的应用程序时遇到了这些错误，我不知道为什么它不工作。我之前使用的是样式加载器，现在我正在尝试实现提取文本插件，但出现以下错误：

问题是所有这一切实际上都在使用样式加载器，我只是用提取插件替换样式加载器，没有更改任何其他加载器或插件，我搜索但没有找到任何解决方案。

vuetify.css 可以在这里找到https://github.com/vuetifyjs/vuetify/tree/master/dist

这是我的 index.scss ：

这是我要导入文件的部分：

Webpack 模块配置：

插件配置：

Webpack 2 构建在生产模式下使用 css-loader 中的 css modules 选项和 extract-text-webpack-plugin 无法正常工作。

正确生成的类是在 html 元素上创建的，这意味着 css-loader 正在按预期工作，但是从 extract-text-webpack-plugin 提取的 css 文件缺少 css 标识符。

我正在使用一种方法来同时实现全局 css 和 css 模块，如此处所述： https://github.com/css-modules/css-modules/pull/65 和此处：https : //github.com/kitze /custom-react-scripts/issues/29。

我对以 .css 结尾的文件和以 .cssm.css 结尾的文件使用不同的加载器测试，表明它们应该使用模块加载。

配置的相关部分：

我已经尝试过建议的解决方案，例如使用 webpack 1 风格的编写加载器，但这并没有帮助。

我正在使用 webpack 版本：2.6.1 和 extract-text-webpack-plugin：2.1.2。

我还尝试了其他版本，但似乎也没有帮助。

我的全局 css 文件工作正常，只有导入的 .cssm.css 文件在与 extract-text-webpack-plugin 一起使用时被忽略。

如何解决 css 模块文件无法与其他全局 css 正确提取的问题？