Webpack 4：模块解析失败：意外字符“@”。 你可能需要一个合适的加载器来处理这种文件类型……

Question

I am using webpack 4 to output two separate css files that I build from standard scss entries that carry style rules with @import s and @media only screen queries.

Here's what my webpack.config.js looks like at the moment:

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries')

function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer)
  } else if (m.name) {
    return m.name
  } else {
    return false
  }
}

module.exports = {
  entry: {
    portrait: path.resolve(`${__dirname}/public/style/portrait.scss`),
        landscape: path.resolve(`${__dirname}/public/style/landscape.scss`),
        App: path.resolve(`${__dirname}/public/javascripts/goose-app.js`)
    },
  mode: 'development',
  devtool: 'source-map',
  optimization: {
    splitChunks: {
      cacheGroups: {
        portraitStyles: {
          name: 'portrait',
          test: (m, c, entry = 'portrait') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
        landscapeStyles: {
          name: 'landscape',
          test: (m, c, entry = 'landscape') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
        new FixStyleOnlyEntriesPlugin(),
    new MiniCssExtractPlugin()
    ],
    output: {
    path: path.resolve(__dirname, 'public', 'dist'),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader }, 
          { loader: 'style-loader' }, 
          { loader: 'css-loader' }, 
          { loader:'sass-loader', options:{ implementation:require('sass')} }
        ],
        include: path.resolve(__dirname, 'public', 'style', 'toucaan')
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
               {
                 loader: 'file-loader',  
                 options: {
                   outputPath: './dist/hashed'
                 }
               }
             ]
      }
    ],
  },
}

When I run $ webpack -w --display-max-modules 0 it just fails with the following output:

ERROR in ./public/style/portrait.scss 10:0
Module parse failed: Unexpected character '@' (10:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| /*  All the style for smart watch or really very tiny viewports here. */
> @media only screen and (max-width: 2in) {
|   body{
|   }

ERROR in ./public/style/landscape.scss 3:0
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import 'toucaan/env/tags/anchor';
|
> .header {
|   width: 100%;
|   z-index: 19999;

I have a feeling that this is an error of order of appearance of plugins but not able to point to it. Can you see?

Answer 1

You can use my setting to see if it work for you

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

Add to plugins section:

plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    }),

And rules section

{
   "test":"/\\.scss$/",
   "use":[
      "style-loader",
      "MiniCssExtractPlugin.loader",
      {
         "loader":"css-loader",
         "options":{
            "minimize":true,
            "sourceMap":true
         }
      },
      {
         "loader":"sass-loader"
      }
   ]
},