加载Sass时,Webpack ExtractTextPlugin引发错误
试图将sass加载程序添加到我的网页包配置中,但遇到错误:加载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
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,这就成功了。。现在你指出我的错误是有道理的。