Javascript 网页包4:模块解析失败：意外字符'@'；。您可能需要适当的加载程序来处理此文件类型…；

我正在使用

webpack4

输出两个独立的css文件，这两个文件是我从标准

scss

条目构建的，这些条目带有带有

@import

s和

@media only screen

查询的样式规则

下面是我的

webpack.config.js

目前的样子：

const path=require（'路径'）
const MiniCssExtractPlugin=require（'mini-css-extract-plugin'）
const FixStyleOnlyEntriesPlugin=require（'webpack-fix-style-only-entries'）
函数递归（m）{
如果（m.发行人）{
返回递归发行人（m.issuer）
}else if（m.name）{
返回m.name
}否则{
返回错误
}
}
module.exports={
条目：{
肖像：path.resolve（`${\uu dirname}/public/style/trait.scss`），
横向：path.resolve（`${\u dirname}/public/style/scape.scss`），
App:path.resolve（`${\uu dirname}/public/javascripts/goose-App.js`）
},
模式:"发展",，
devtool:'源映射'，
优化：{
分割块：{
缓存组：{
肖像风格：{
姓名：'肖像'，
测试：（m，c，条目='纵向'）=>
m、 constructor.name=='CssModule'&&recursiveIssuer（m）==entry，
块：“全部”，
是的，
},
景观风格：{
名称：'景观'，
测试：（m，c，条目='横向'）=>
m、 constructor.name=='CssModule'&&recursiveIssuer（m）==entry，
块：“全部”，
是的，
},
},
},
},
插件：[
新的FixStyleOnlyEntriesPlugin（），
新的MiniCssExtractPlugin（）
],
输出：{
path:path.resolve（uu dirname，'public'，'dist'），
文件名：'[name].bundle.js'
},
模块：{
规则：[
{
测试：/\（sa|sc|c）ss$/，
使用：[
{loader:MiniCssExtractPlugin.loader}，
{loader:'style loader'}，
{loader:'css loader'}，
{loader:'sass-loader'，选项：{implementation:require（'sass'）}
],
包括：path.resolve（uu dirname，'public'，'style'，'toucan'）
},
{
测试：/\.js$/,，
排除：/（节点\模块）/，
使用：{
加载器：“巴别塔加载器”，
选项：{
预设：['@babel/preset env']
}
}
},
{
测试：/\（png | jpe？g | gif | svg）$/，
使用：[
{
加载器：“文件加载器”，
选项：{
outputPath:“./dist/hashed”
}
}
]
}
],
},
}

当我运行

$webpack-w--display max modules 0

时，它会失败，并出现以下输出：

/public/style/trait.scss 10:0中的

错误
模块分析失败：意外字符“@”（10:0）
您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看见https://webpack.js.org/concepts#loaders
|
|/*这里的所有样式都适用于智能手表或非常小的视口*/
>@仅媒体屏幕和（最大宽度：2英寸）{
|身体{
|   }
/public/style/landscape.scss 3:0中出错
模块分析失败：意外令牌（3:0）
您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders
|导入“Toucan/env/tags/anchor”；
|
>.标题{
|宽度：100%；
|z指数：19999；

---

我有一种感觉，这是插件外观顺序的错误，但无法指向它。您能看到吗？

您可以使用我的设置来查看它是否适合您

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

添加到插件部分：

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

行政及规则组

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