0

我已经阅读了关于 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 是一个 js 文件输出为 bundle.css

到目前为止我已经尝试过：

  1. 使用样式加载器

  2. 使用装载机的组合：

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

  3. MiniCssExtract插件

  4. 在节点 6.8.1 和 8.x 上尝试过

但我得到同样的错误。早些时候，由于加载程序的歧义，我曾经让模块构建失败；这得到了include关键解决。

自从 4 天以来，我一直在把头撞在墙上。咕噜声更容易。

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

4

3 回答 3

0

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

我运行了一个生产版本，它有效。我立即重新尝试了开发配置（没有更改任何内容），然后它开始工作。

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

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

我还不确定那个钩子是什么，但是一旦（如果）我这样做了，我会在这里添加它。

于 2019-03-29T15:05:18.843 回答
0

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

于 2019-04-19T19:08:23.807 回答
-1

我有同样的问题。我还没有解决方案，但我确实注意到您的装载机的顺序似乎不正确。我相信装载机是从右到左阅读的，所以可能会改变：

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

至：

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

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

于 2018-08-15T06:58:12.187 回答