Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/webpack/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
加载Sass时,Webpack ExtractTextPlugin引发错误_Sass_Webpack_Sass Loader - Fatal编程技术网

加载Sass时,Webpack ExtractTextPlugin引发错误

加载Sass时,Webpack ExtractTextPlugin引发错误,sass,webpack,sass-loader,Sass,Webpack,Sass Loader,试图将sass加载程序添加到我的网页包配置中,但遇到错误: 70% 1/1 build modules/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81 r.forEach(function(r) { ^ TypeError: undefined is not a function at /Users

试图将sass加载程序添加到我的网页包配置中,但遇到错误:

70% 1/1 build modules/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81
        r.forEach(function(r) {
          ^
TypeError: undefined is not a function
    at /Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81:5
    at Array.reduce (native)
    at LoadersList.match (/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:80:27)
webpack.config:

var webpack = require("webpack");
var baseDir = "dist";

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var path = require("path");

module.exports = {
    context: __dirname + "/app",
    entry: {
        app: "./main"
    },
    resolve: {
        extensions: ['', '.js', '.ts', '.css', '.scss']
    },
    output: {
        path: __dirname + "/dist",
        sourceMapFilename: "[name].map",
        filename: "[name].js"
    },
    module: {
        loaders: [
            //https://www.npmjs.com/package/webpack-typescript
            {
                test: /\.ts$/,
                loader: "ts-loader"
            },
            {
                test: /\.scss$/,
                loaders: ExtractTextPlugin.extract("style", "css!sass")
                //loaders: ExtractTextPlugin.extract("style!css!sass")
            }
        ],
        noParse: [ /angular2\/bundles\/.+/ ]
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(true),
        new ExtractTextPlugin("style.css"),
        new HtmlWebpackPlugin({
            template: "../index.html",
            inject: "body"
        })
    ],
    devtool: "source-map"
};
对于extract()调用的参数,我尝试了许多不同的选项,但没有成功。任何帮助都将不胜感激。

请不要使用

loaders: ExtractTextPlugin.extract("style", "css!sass")
你应该使用

loader: ExtractTextPlugin.extract("style", "css!sass")
相反


在本例中,错误不是特别具有描述性。

在我的案例中,解决方案是ExtractTextPlugin使用MinicsExtractPlugin。更多细节在这个视频 所以,我的配置看起来像

const { CleanWebpackPlugin } = require("clean-webpack-plugin");    
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "[name].[contenthash].bundle.js",
        path: path.resolve(__dirname, "dist"),
    },
    module: {
        rules: [
            //babel
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"],
                    },
                },
            },
            //css
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "index.html",
            title: "My app",
        }),
        new MiniCssExtractPlugin(),
        new CleanWebpackPlugin(),
    ],
};

谢谢@bebraw,这就成功了。。现在你指出我的错误是有道理的。