webpack Error :Module parse failed 你可能需要一个合适的加载器来处理这个文件类型答案

【问题标题】：webpack Error :Module parse failed You may need an appropriate loader to handle this file typewebpack Error :Module parse failed 你可能需要一个合适的加载器来处理这个文件类型
【发布时间】：2017-02-08 14:54:57
【问题描述】：

我想用 extract-text-webpack-plugin 从 sass 文件中提取和编译 css 代码，但是 webpack 给了我这个错误：

ERROR in ./style.scss
Module parse failed: H:\projects\new\app\style.scss Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
| body{
|   background-color: #d9534f;
| }
 @ ./index.js 2:0-22

我的 webpack 和 extract-text-webpack-plugin 版本：

"extract-text-webpack-plugin": "^2.0.0-beta.4",
"webpack": "^2.1.0-beta.22"

我的 webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('test.css');

module.exports = {
    context:path.resolve(__dirname, 'app'),
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'app'),
        filename: 'bundle.js'
    },
    module: {
        loader: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
            , {
                test: /\.s?css$/,
                loader: extractCSS.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!sass-loader' })
    }
            , {
                test: /\.html$/,
                loader: 'raw-loader'
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                exclude: /(node_modules)/,
                loader: 'url-loader?limit=10000'
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&minetype=application/font-woff'
}, {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader'
}
        ]
    },
    plugins: [
        extractCSS,
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'app')+'/index.html',
        inject: 'body'
    })
]
};

还有我的简单 .scss 文件：

body{
  background-color: #d9534f;
}

【问题讨论】：

标签： javascript angularjs webpack

【解决方案1】：

这样对我有用。

在顶部添加const ExtractTextPlugin = require("extract-text-webpack-plugin");。

并将其添加到加载器：

        test: /\.s?css$/,
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader'}),
    },

【讨论】：

我尝试过，但给我这个错误：TypeError: Cannot read property 'query' of undefined

【解决方案2】：

我解决了：

 module: {
        loaders: [
            {

而不是

 module: {
        loader: [
            {

【讨论】：

【解决方案3】：

朋友来了

{ test: /\.sass$/, use: extractText.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' }) }

【讨论】：