sass 和 css 的 NodeJS webpack 配置错误答案

【问题标题】：NodeJS webpack configuration error for sass and csssass 和 css 的 NodeJS webpack 配置错误
【发布时间】：2022-02-12 09:19:07
【问题描述】：

我最近将我的 NodeJS 版本更新为“v16.13.2”，从那时起，我构建的模板在尝试捆绑 scss 和 css 时出现故障。其他一切在构建时都可以正常工作。我知道 node-sass 已被弃用，我应该使用 sass (dart-sass)。然而，当我运行我的构建时，我得到了这个错误：

Module parse failed: C:\Users\...\src\styles\styles.scss Unexpected token (1:3)
You may need an appropriate loader to handle this file type.
| h1 {

|   color: white;

|   text-align: center;

 @ ./src/app.js 25:0-31
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/app.js

我正在尝试让基本的 CSS 工作，但加载程序似乎无法识别代码。这是我的代码

package.json:

"scripts": {
"build:dev": "webpack",
"build:prod": "webpack -p --env production",
"dev-server": "webpack-dev-server",
"test": "cross-env NODE_ENV=test jest --config=jest.config.json",
"start": "node server/server.js",
"heroku-postbuild": "yarn run build:prod"
},
 "dependencies": {
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.23.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"css-loader": "^6.5.1",
"express": "4.15.4",
"extract-text-webpack-plugin": "3.0.0",
"firebase": "^8.9.1",
"history": "4.10.1",
"moment": "2.18.1",
"normalize.css": "7.0.0",
"numeral": "2.0.6",
"react": "^16.14.0",
"react-addons-shallow-compare": "15.6.0",
"react-dates": "12.7.0",
"react-dom": "^16.14.0",
"react-modal": "2.2.2",
"react-redux": "5.0.5",
"react-router-dom": "4.1.2",
"redux": "3.7.2",
"redux-mock-store": "1.2.3",
"redux-thunk": "2.2.0",
"sass": "^1.49.7",
"sass-loader": "7.3.1",
"style-loader": "0.18.2",
"uuid": "3.1.0",
"validator": "8.0.0",
"webpack": "3.1.0"
},
"devDependencies": {
"cross-env": "5.0.5",
"dotenv": "^14.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"enzyme-to-json": "^3.6.1",
"jest": "20.0.4",
"raf": "^3.4.1",
"react-test-renderer": "^16.14.0",
"webpack-dev-server": "2.5.1"

}

webpack.cnfig.js：

return{
entry: ['babel-polyfill','./src/app.js'],
output: {
  path: path.join(__dirname, 'public', 'dist'),
  filename: 'bundle.js'
},
module: {
  rules: [{
    loader: 'babel-loader',
    test: /\.js$/,
    exclude: /node_modules/
  }, 
  {
    test: /\.s?css$/,
    use: CSSExtract.extract({
      use: [
        {
          loader: 'css-loader',
          options:{
            sourceMap: true
          }
        },
        {
          loader: 'sass-loader',
          options:{
            sourceMap: true
          }
        }
      ]
    })
  }
]
},

编辑：经过大量研究，我还发现“extract-text-webpack-plugin”也已被弃用，文档建议我使用“mini-css-extract-plugin”。因此，我为此阅读了文档并应用了它，但仍然没有任何效果。我只希望我的 webpack 将我的 .js 和 .css 捆绑在单独的文件中。现在所有这些都被推入'bundle.js'并且它不渲染任何css。

编辑 2：这是我的新 webpack.config.js，它可以按我的意愿工作：

webpack.config.js:

webpack.config.js：

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

  process.env.NODE_ENV = process.env.NODE_ENV || 'development'

  if(process.env.NODE_ENV === 'test'){
    require('dotenv').config({ path: '.env.test'})
  }else if(process.env.NODE_ENV === 'development'){
    require('dotenv').config({ path: '.env.development'})
  }

  module.exports = (env) => {
    const isProd = env === 'production'
    
    return{
      entry: ['babel-polyfill','./src/app.js'],
      output: {
        path: path.join(__dirname, 'public', 'dist'),
        filename: 'bundle.js'
      },
      module: {
        rules: [{
          loader: 'babel-loader',
          test: /\.js$/,
          exclude: /node_modules/
        },
        {
          test: /\.(css)$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader']
        },
        {
          test: /\.(s[ca]ss)$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }
      ]
      },
      plugins:[
        new MiniCssExtractPlugin({
          filename:'styles.css'
        }),
        new webpack.DefinePlugin({
          'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY),
          'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
          'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
          'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
          'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
          'process.env.FIREBASE_MESSAGE_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGE_SENDER_ID),
          'process.env.FIREBASE_APP_ID': JSON.stringify(process.env.FIREBASE_APP_ID)
        })
      ],
      devtool: isProd ? 'source-map' :'inline-source-map',
      devServer: {
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
        publicPath: '/dist'
      }
    }
  }

【问题讨论】：

您是否也尝试更新sass-loader 和style-loader 的版本？
@Arkellys 是的，我更新了所有内容并进行了更多研究。我的很多模板现在已被弃用，所以我必须进行全面更新。我会在编辑中解释。

标签： css node.js webpack sass

【解决方案1】：

好吧，我终于有了所有这些的答案。因此，由于不推荐使用的模块，我基本上不得不更新很多我的 webpack。我最终使用了“mini-css-extract-plugin”并了解了如何设置它。如果有人正在使用 Nodejs 版本 16 及更高版本进行项目，请在 webpack 上试试这个，看看它是否有效。我将在最初的问题中发布我的结果。

【讨论】：