Сбой сборки модуля после обновления Webpack до 4.35.3 и Laravel Mix до 4.1.2 - PullRequest
2 голосов
/ 09 июля 2019

Привет, я давно пользуюсь Webpack версии 4.35.2 и Laravel Mix 4.0.16. Сегодня я обновляю их до последней версии (Webpack 4.35.3, Laravel Mix 4.1.2), и мой проект не удалось собрать. Вот ошибка:

"Module build failed (from ./node_modules/css-loader/dist/cjs.js):

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
// Fonts
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
      in /resources/assets/sass/app.scss (line 1, column 1)
    "
ERROR in ./resources/assets/sass/app.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,600");
^
      Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"
      in /resources/assets/sass/app.scss (line 1, column 1)

Это мой webpack.mix.js :

const  mix  = require('laravel-mix');

mix.sass('resources/assets/sass/app.scss', 'public/css/app.css')
    .react([
        'resources/js/app.js'
    ], 'public/js/app.js')

mix.sourceMaps().webpackConfig({devtool: 'source-map'});
mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|jpg)$/,
        exclude: /node_modules/,
        loader: 'file-loader'
      },
    ]
  },
});

mix.extract();

My app.scss:

// Fonts
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,600");

@import "variables";
@import "../../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../../../../node_modules/font-awesome/scss/font-awesome";

@import "mixins";
...

Забавно, если я прокомментирую импорт Google Fonts, ошибка будет указывать на @import "variable";

...