Next.js + Webpack：努力将第三方SCSS导入到项目中

Question

我正在尝试在项目中使用这个很酷的React Button Component，但我不明白我要去哪里哪里以及Webpack不能正常工作。请您帮忙！我也是Webpack的新手，如果您能为我指明正确的方向，我将不胜感激。非常感谢：）

我收到此错误消息：

[ error ] ./node_modules/react-awesome-button/src/styles/styles.scss 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // [Default] Variables
> @import './base/variables.scss';
| // [Default] Custom Properties
| @import './base/custom-properties.scss';

Package.json

  {
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.0.8",
    "react": "16.10.2",
    "react-awesome-button": "^6.1.2",
    "react-dom": "16.10.2",
    "styled-components": "^4.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-cgb": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "4.36.0",
    "webpack-cli": "^3.3.9"
  }
}

Webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
    entry: './pages/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },
            {
                test: /\.ts$/,
                use: 'ts-loader'
            },
            {
                test: /\.css$/,
                use: [
                    // style-loader
                    { loader: 'style-loader' },
                    // css-loader
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    // sass-loader
                    { loader: 'sass-loader' }
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    'style-loader',
                    // Translates CSS into CommonJS
                    'css-loader',
                    // Compiles Sass to CSS
                    'sass-loader',
                ],
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './src/index.html' })
    ],
    mode: 'production'
};

此行中断：

 import AwesomeButtonStyles from "react-awesome-button/src/styles/styles.scss";

Answer 1

您要导入HTML的样式文件，它是.css扩展名还是.scss扩展名？如果您仅使用.scss文件，则需要在webpack文件夹中更改测试Regex来查找该扩展名。

 test: /\.scss$/

但是，如果您同时使用两种扩展名类型的文件，则需要使用如下所示的测试值。问号查找0或多个出现的s，因此它将适用于scss和css文件。

 test: /\.s?css$/

让我知道是否有帮助。