Next.js + Webpack: Попытка импортировать сторонние SCSS в проект - PullRequest
Новая
       19

Next.js + Webpack: Попытка импортировать сторонние SCSS в проект

0 голосов
/ 17 октября 2019

Я пытаюсь использовать этот крутой React Button Component внутри моего проекта, но я не понимаю, где я ошибаюсь и как мой Webpack не работает. Пожалуйста, не могли бы вы помочь! Я также новичок в Webpack, и я был бы признателен, если бы вы указали мне правильное направление. Большое спасибо:)

Getting this 404 error message

Я получаю это сообщение об ошибке : 

[ 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';

Пакет.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";

1 Ответ

0 голосов
/ 17 октября 2019

Файл стилей, который вы импортируете в свой HTML, это расширение .css или расширение .scss? Если вы просто используете файлы .scss, вам нужно изменить тестовый Regex в папке вашего веб-пакета, чтобы найти это расширение. 

 test: /\.scss$/

Если вы используете файлы с обоими типами расширений, то выЯ хочу использовать значение теста, как показано ниже. Знак вопроса ищет 0 или более вхождений s, поэтому он будет работать для файлов scss и css. 

 test: /\.s?css$/

Дайте мне знать, если это поможет.

...