Webpack, sass-loader w / node-sass не может разобрать модуль @import («Неожиданный символ« @ »») - PullRequest
Новая
       60

Webpack, sass-loader w / node-sass не может разобрать модуль @import («Неожиданный символ« @ »»)

0 голосов
/ 05 апреля 2020

Обзор: Я пытаюсь скомпилировать S CSS, используя Webpack с "node-sass", "sass-loader", "css -loader", & "style-loader" и никакой конкретной JS инфраструктуры, кроме Typescript как JS.

Я перепробовал все, что могу придумать или найти в inte rnet, включая установку более старых версий этих зависимостей Я знаю, что работают в других проектах. На данный момент, я в своем уме. Кто-нибудь может заметить, что я делаю неправильно?

Пожалуйста, дайте мне знать, если мне нужно добавить какие-либо подробности.

Наблюдаемая ошибка:

ОШИБКА в ./src/styles/base.scss 1: 0

Ошибка синтаксического анализа модуля: неожиданный символ '@' (1: 0)

Возможно, вам понадобится соответствующий загрузчик для обработки этого типа файлов, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack.js.org/concepts#loaders @import 'reset';

|

| / *

@ ./src/layouts/page.ts 21: 0-30

@ ./app.ts

ℹ ｢wdm｣: Не удалось скомпилировать.

пакет. json подробности:

  • Основной файл: "main": "app.ts"
  • Варианты комплектации:
    • "devDependencies": { "@types/webpack": "^4.41.10", "@types/webpack-dev-server": "^3.10.1", "css-loader": "^3.4.2", "node-sass": "^4.13.1", "sass-loader": "^8.0.2", "style-loader": "^1.1.3", "svg-inline-loader": "^0.8.2", "ts-loader": "^6.2.2", "typescript": "^3.8.3", "webpack": "^4.42.1", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3" }
  • Запуск сценария запуска:
    • "start": "webpack-dev-server --open"

Конфигурация Webpack : 

const path = require('path');
const CWD = process.cwd();
const sass = require('node-sass');
module.exports = {
    devtool: 'eval-source-map',
    devServer: {
        port: 4001
    },
    entry: {
        app: './app.ts'
    },
    output: {
        chunkFilename: '[id].js',
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
    },
    mode: 'development',
    module: {
        rules: [{
            exclude: /node_modules/,
            test: /\.ts$/,
            loader: 'ts-loader'
        },
        {
            test: '/\.(css|scss)$/',
            use: [
                // Creates `style` nodes from JS strings
                'style-loader',
                {
                    // Translates CSS into CommonJS
                    loader: 'css-loader',
                    options: {
                        modules: true
                    }
                },
                {
                    // Compiles Sass to CSS
                    loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            includePaths: [path.resolve(CWD, 'src/styles')]
                        }
                    }
                }
            ]
        }]
    },
    // Fixes npm packages that depend on `fs` module
    node: {
        fs: 'empty'
    },
    resolve: {
        extensions: ['.css', '.js', '.scss', '.ts'],
        modules: [
            'node_modules',
            path.resolve(__dirname)
        ]
    },
    target: 'web'
};

1 Ответ

1 голос
/ 05 апреля 2020

похоже, что вы случайно указали свое регулярное выражение: 

- test: '/\.(css|scss)$/',
+ test: /\.(css|scss)$/,
...