webpack пытается разобрать sass в javascript в изоморфном приложении - PullRequest
0 голосов
/ 13 мая 2018

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

/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.

1 Ответ

0 голосов
/ 13 мая 2018

Для всех, кто борется с этой проблемой, для меня ответом было добавить запись в мой 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/ в массив белых списков, и теперь все волшебным образом работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...