Question

我已经阅读了有关Webpack 4的所有可能配置，这些配置将.scss文件捆绑为.css文件。

没有什么对我有用。

这是我的webpack配置：

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-loader' ]
MiniCssExtractPlugin
在节点6.8.1和8.x上尝试过

但是我得到了同样的错误。之前，我曾经因为加载程序的含糊性而使Module构建失败。通过include键已解决。

自4天以来，我一直在墙上撞头。咕gr声要容易得多。

能否请您分享一个有效示例的链接。 Github线程只是人们在大肆宣传，没有任何可行的例子。

Answer 1

我遇到了同样的问题。我还没有解决方案，但是我确实注意到装载机的顺序似乎不正确。我相信装载机是从右向左读取的，所以也许可以更改：

use: [ 'sass-loader', 'style-loader', 'css-loader' ]

收件人：

使用：['css-loader'，'style-loader'，'sass-loader']

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

Answer 2

我知道这有点旧，但是即使在我的dev配置中以正确的顺序加载程序时，我也遇到了同样的问题。我知道是什么解决了我的问题，但我不知道为什么！

我运行了一个生产版本，该版本有效。我立即重新尝试了dev配置（不进行任何更改），然后开始工作。

我的第一个假设是我错误地将自己的dev config设置为依赖于dist文件夹中的内容，因此，作为后续测试，我删除了dist文件夹中的生成文件并重新尝试了dev config ...但它仍然有效。

据我所知，运行生产版本的过程将开发版本正常工作所必需的东西联系在一起。

我尚不确定该钩子是什么，但是一旦完成，我将在这里添加它。

Answer 3

好的，我不好。 Webpack的想法是将.scss文件秘密转换为.css格式。将.scss导入js文件后，.css文件就会变成图片。没有物理的.css文件。加载程序只会加载.scss文件并提供.css运行时。

将Webpack 4与extract-text-plugin一起使用时，模块解析失败的意外令牌

3 个答案: