无法使用 ExtractTextPlugin webpack 从 scss 中提取 CSS答案

【问题标题】：Unable to extract CSS from scss with ExtractTextPlugin webpack无法使用 ExtractTextPlugin webpack 从 scss 中提取 CSS
【发布时间】：2017-06-09 15:04:14
【问题描述】：

我的 webpack.config.js 和 package.json 分别有以下配置：

var extractSCSS = new ExtractTextPlugin({filename: '[name].css', disable: false, allChunks: true});


module: {
    loaders: [
        {
            test: /\.jsx?$/,
            include: SRC_DIR,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ["react", "es2015", "stage-2"]
            }
        },
        {
            test: /\.scss$/i,
            include: SRC_DIR,
            exclude: /(node_modules)/,
            loader: extractSCSS.extract(['css','sass'])
        }
    ]
},
plugins: [
    extractSCSS
]

和

"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta",
"style-loader": "^0.13.1",
"webpack": "^2.2.0",

但我无法生成 css 文件。我在这里有什么遗漏吗？

编辑我更新了以下文件：

    "css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta.5",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",

和

{
     test: /\.css$/,
     exclude: /(node_modules)/,
     loader: ExtractTextPlugin.extract({
        fallbackLoader: "style-loader",
        loader: "css-loader",
        publicPath: "/dist"
     })
 }

【问题讨论】：

标签： css sass webpack webpack-2 extracttextwebpackplugin

【解决方案1】：

我设置了ExtractTextPlugin，它可以工作，但它看起来与您的配置完全不同。这是我的配置

module: {
    rules: [
        ...
        {
            loader: ExtractTextPlugin.extract({
                fallbackLoader: "style-loader",
                loader: [
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "postcss-loader"
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }),
            test: /\.s(a|c)ss$/
        }
        ...
},
plugins: [
    ...
    new ExtractTextPlugin({
        allChunks: true,
        filename: "style.[contenthash].css"
    })
    ...
]

它的工作原理是从后到前调用加载程序。所以首先是sass-loader，然后是postcss-loader，等等。fallbackLoader 选项在没有可以提取的 CSS 时使用。

最后但同样重要的是，我想补充一点，我不会在开发中使用 ExtractTextPlugin，因为它会导致构建时间更长。

编辑

我忘记在我的配置中包含插件部分。只是为了澄清，这些点意味着它是我的配置的一部分。提供了与问题相关的所有内容。

【讨论】：

【解决方案2】：

你必须安装sass-loader

npm install --save-dev sass-loader

请注意，使用 Webpack2 您应该/必须更新配置文件：

在引用加载器时不再可以省略 -loader 扩展 (Automatic -loader)
module.loaders 现在是module.rules (webpack 2 migration guide)
chaining loaders 仅支持使用旧选项 module.loaders
在 V2 中 rule.use 条目指定要使用的加载程序。 (rule.use)

这是我的工作配置的摘录：

const extractCss = new ExtractTextPlugin('app.bundle.css');

添加此规则：

{
    test: /\.scss$/,
    loader: extractCss.extract([
        { loader: 'css-loader', query: { sourceMaps: true }},
        { loader: 'sass-loader', query: { sourceMaps: true }}
    ])
},

和插件：

plugins: [
    extractCss,

【讨论】：

好的，所以我安装了 sass-loader，更新了 webpack.config 文件，但仍然没有生成 css 文件。此外，当我尝试安装 extract-text-webpack-plugin@beta 时，它表示 node-sass@^3.4.0 的未满足对等依赖关系 | | 4.0.0，但是我已经安装了node-sass。
您更新的配置目标 css 文件 (/\.css$/) 而不是 .scss 并且没有 sass 加载程序...

【解决方案3】：

不确定这是否会有所帮助，但对于从 Browserify 迁移过来的我来说，我对同样的问题感到有些悲伤。

我没有意识到为了让 ExtractTextPlugin 生成任何 css，我必须将 scss 包含在 javascript somewhere 中（即使它正在提取到 app.bundle.css 或类似内容），否则它会默默地不产生任何输出。

应用程序.js

require('../scss/container.scss')

或

import css from '../scss/container.scss'

将导致在开发中在标头中注入<style> 标签，并在生产中提取app.bundle.css 文件。

【讨论】：