Webpack sass-loader Неверный CSS

Я получаю эту ошибку всякий раз, когда запускаю мою сборку.

Invalid CSS after "module.exports": expected "{", was '= "data:text/x-scss'

Я также пытался использовать конфигурацию веб-пакета vanilla JS и получаю ту же ошибку, так что это не конфигурация TypeScript. Также попытался извлечь-текст-вебпак-плагин, но получил ту же ошибку. Фактическое приложение работает нормально, но, очевидно, не имеет CSS. Вот конфиг.

import * as path from 'path';
import * as webpack from 'webpack'

const config: webpack.Configuration = {
    entry: {
        app: ['./js/main.ts']
    },
    output: {
        path: path.resolve(__dirname, './dist/js'),
        filename: '[name].js'
    },
    module: {
        rules:[
            {
                test: /\.html$/,
                loader: 'ngtemplate-loader?prefix=/&module=app&relativeTo=' + (path.resolve(__dirname, './js/app')) + '/!html-loader'
            },
            {
                test: /\.ts$/,
                loader: 'awesome-typescript-loader'
            },
            {
                test: /\.(sass|scss|ttf|svg|woff)$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader",
                }, {
                    loader: "url-loader"
                }]
            }
        ]
    }
}

export default config

А вот фрагмент основного файла sass.

@import "utilities/variables";
@import "utilities/animations";
@import "utilities/helpers";

Который импортируется в основной файл приложения с помощью:

import '../sass/sass.scss';

webpack sass-loader
person Ian Hoar    schedule 13.09.2017    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Я думаю, что ошибка в том, что вы каким-то образом используете url-loader для Sass файлов. Разделите правило webpack.config для (sass|scss|ttf|svg|woff), чтобы оно выглядело так:

{
  test: /\.(ttf|svg|woff)$/,
  use: [{
    loader: "url-loader"
  }]
},
{
  test: /\.(sass|scss)$/,
  use: [{
    loader: "style-loader"
  }, {
    loader: "css-loader"
  }, {
    loader: "sass-loader",
  }]
}
person GProst    schedule 14.09.2017