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

Question

我的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"
     })
 }

Answer 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，等等。当没有可以提取的 CSS 时，将使用 fallbackLoader 选项。

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

编辑

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

Answer 2

你必须

安装sass-loader

npm install --save-dev sass-loader

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

• 引用加载器时不再可能省略 -loader 扩展名（自动 -loader）

• module.loaders现已module.rules （ webpack 2 迁移指南 ）

• 仅支持使用旧选项链接加载程序module.loaders

• 在 V2 中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,

Answer 3

不确定这是否有帮助，但对我来说，从浏览器转移过来，我对同样的问题感到有些悲伤。

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

应用.js

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

或

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

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