Webpack пытается преобразовать sass в javascript в изоморфном приложении

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

/Users/paulcowan/projects/cake-manager/node_modules/@cutting/component-library/dist/components/atoms/Input/Input.scss:1
(function (exports, require, module, __filename, __dirname) { @import '../../../styles/index';
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:152:10)
    at Module._compile (module.js:624:28)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/paulcowan/projects/cake-manager/node_modules/@cutting/component-library/src/components/atoms/Input/index.tsx:4:16)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)

Мои правила css выглядят так:

module: {
  rules: [
    {
      test: /\.(css|scss|sass)$/,
      use: [
        {
          loader: 'css-loader/locals',
          options: {
            modules: true,
            importLoaders: 2,
            getLocalIdent
          }
        },
        {
          loader: 'sass-loader'
        }
      ]
    }
  ]
},

похоже, какой-то загрузчик пытается превратить sass в javascript, но я не понимаю, почему. Я не использую babel и использую машинописный текст с такой конфигурацией:

{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  loader: 'awesome-typescript-loader',
  options: merge({ useBabel: false, useCache: false }, typescriptOptions)
}

])

Что бы пытаться разобрать sass на js?

Это происходит только тогда, когда у меня есть зависимость в node_modules.

Поиск всех неиспользуемых файлов в проекте
Поиск всех неиспользуемых файлов в проекте
Количество файлов в проекте растет по мере его развития. И если быть по-настоящему честным, их продвижение происходит в геометрической прогрессии...
Настройка шаблона Metronic с помощью Webpack и Gulp
Настройка шаблона Metronic с помощью Webpack и Gulp
Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...
0
0
79
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для всех, кто боролся с этой проблемой, для меня ответ состоял в том, чтобы добавить запись в мой хэш nodeExternals.

Мой nodeExternals теперь выглядит так:

nodeExternals({
      modulesDir,
      whitelist: [
        isDevelopment ? 'webpack/hot/poll?300' : null,
        /\.(eot|woff|woff2|ttf|otf)$/,
        /\.(svg|png|jpg|jpeg|gif|ico)$/,
        /\.(mp4|mp3|ogg|swf|webp)$/,
        /\.(css|scss|sass|sss|less)$/,
        /^@cutting/
      ].filter(x => x)
    });

Я добавил запись /^@cutting/ в массив белого списка, и теперь все волшебным образом работает.

Другие вопросы по теме