使用带有提取文本插件的Webpack 4时，模块解析失败，出现意外标记

我已经阅读了sun下关于Webpack4将.scss文件绑定到.css文件的所有可能配置

没有什么对我有用

以下是我的网页包配置：

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');

var absDirPath = __dirname;

module.exports = {
    mode: 'development',
    entry: [
        path.join(absDirPath + '/src/assets/main.scss')
    ],
    output: {
        path: path.join(absDirPath + '/dist'),
        filename: 'bundle.css',
        publicPath: './',
    },
    plugins: [
        new ExtractTextPlugin('bundle.css')
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                include: path.join(absDirPath + '/src/assets/*.scss'),
                use: ExtractTextPlugin.extract({
                    use: ['sass-loader', 'css-loader]
                })
            }
        ]
    }
}

这是我的.scss文件：

html, body {
  width: 100%;
  height: 100%;
}

这是我的package.json

{
  "name": "webpack-sass",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  }
}

这是我得到的错误

Hash: da6dbe80b661e11c34ed
Version: webpack 4.16.5
Time: 87ms
Built at: 08/14/2018 2:03:36 AM
     Asset      Size  Chunks             Chunk Names
bundle.css  4.41 KiB    main  [emitted]  main
Entrypoint main = bundle.css
[./src/assets/main.scss] 185 bytes {main} [built] [failed] [1 error]
[0] multi ./src/assets/main.scss 28 bytes {main} [built]

ERROR in ./src/assets/main.scss 1:11
Module parse failed: Unexpected token (1:11)
You may need an appropriate loader to handle this file type.
> html, body {
|   width: 100%;
|   height: 100%;
 @ multi ./src/assets/main.scss main[0]

npm ERR! Windows_NT 10.0.16299
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.8.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! webpack-sass@0.0.1 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-sass@0.0.1 build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webpack-sass package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs webpack-sass
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls webpack-sass
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

最重要的是，bundle.css是作为bundle.css输出的js文件

到目前为止，我所尝试的：

使用样式加载器

使用装载机的组合：

使用：[ “sass loader”， “样式加载器”， “css加载器” ]

MinicsSextract插件

在节点6.8.1和8.x上试用

但我也犯了同样的错误。早些时候，由于加载程序的不明确性，我常常导致模块构建失败；通过include键解决了这个问题

4天以来，我的头一直撞在墙上。有了咕噜声就容易多了

---

你能分享一个工作示例的链接吗。Github线程只是人们胡说八道，没有任何工作示例。

我也有同样的问题。我还没有一个解决方案，但我注意到你们装载机的顺序似乎不正确。我相信装载机是从右向左读取的，因此可能会更改：

用法：['sass加载器'，'style加载器'，'css加载器']

致：

用法：['css加载器'，'style加载器'，'sass加载器']

---

祝你好运！我很想听听您找到的任何解决方案。

我知道这是一个有点旧的解决方案，但即使在我的开发配置中加载程序的顺序正确，我也遇到了同样的问题。我知道是什么为我修好的，但我不知道为什么

我运行了一个生产构建，这很有效。我立即重新尝试了dev配置，没有做任何更改，然后它开始工作

我的第一个假设是，我错误地将我的开发配置设置为依赖dist文件夹中的某些内容，因此作为后续测试，我删除了dist文件夹中生成的文件，并重新尝试了开发配置……但它仍然有效

据我所知，运行生产构建的过程会将开发构建工作所必需的东西挂钩在一起

---

我还不确定那个钩子是什么，但一旦我确定了，我会把它添加到这里。

好吧，我的错。webpack的思想是动态地将.scss文件转换为.css格式。在js文件中导入.scs时，.css文件就会出现。没有物理的.css文件。加载程序将只加载.scss文件并提供.css运行时。

在此链接中：它们使用了我使用的顺序