Webpack 4 mini-css-extract-plugin错误:您可能需要适当的加载程序来处理此文件类型

时间:2018-09-16 06:51:02

标签: javascript css webpack sass

webpack的新功能, 尝试使用scsscss文件导出到mini-css-extract-plugin失败, 我收到此错误:

ERROR in ./assets/src/css/style.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/mini-css-extract-plugin/dist/loader.js??ref--5-3!./assets/src/css/style.scss)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
  

身体{   |背景颜色:绿色;   | }

这是webpack.config.js文件的内容。

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './assets/src/js/main.js',
  plugins: [
    // Adding our UglifyJS plugin
    new UglifyJSPlugin(),
    new MiniCssExtractPlugin()
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'assets/dist/js')
  },
  module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
            loader: 'babel-loader',
                options: {
                    presets: ['babel-preset-env']
                }
            }
        },
        //sass
        {
            test: /\.scss$/,
            use: [
                    {
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                },{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        // you can specify a publicPath here
                        // by default it use publicPath in webpackOptions.output
                        filename: "./assets/dist/css/style.css",
                        chunkFilename: "[name].css"
                      }

                }
            ]
        },
       // css
        {
            test: /\.css$/,
            loader: 'style-loader',
        },
        {
            test: /\.css$/,
            loader: 'css-loader',
            options: {
                minimize: true
            }
        }
    ]
  }
};

这是style.scss文件的完整内容

body{
    background-color: green;
}

这是文件夹结构: enter image description here

缺少的装载程序是什么? 问题是什么? 我读了几个答案,但没有成功。

0 个答案:

没有答案