Node -асс не понимает тильду

Исследуя недавно выпущенный angular-cli для RC1 Angular2, я столкнулся с непонятной проблемой: node-sass внутри sass-плагина в angular-cli не анализирует ~ до того, как имя пакета выбрасывает следующую ошибку:

Error: File to import not found or unreadable: [email protected]/core/style/theme-functions

Это происходит при компиляции следующего кода:

@import "[email protected]/core/style/theme-functions";

Если я удалю тильду, все будет в порядке. Правильное поведение, или есть путь, чтобы сделать node-sass понятным ~?

P.S. Я использую WebStorm, и он предпочитает использовать ~ тоже. Если тильда опущена, она жалуется на неспособность разрешить путь. И после некоторых поисковых запросов я обнаружил, что использование кода без тильды является наследием, а ~ следует использовать в качестве лучшей практики. Это правильно?

Ответ 1

Решение по разрешению Tilde - это то, что делает webpack, node -sass не имеет такого встроенного резольвера. sass-loader для webpack имеет это. Вы можете написать свое собственное разрешение импорта в качестве альтернативы.

Просто для полноты здесь, как вы можете это сделать без webpack/sass-loader с помощью пользовательского импортера:

function importer(url, prev, done) {
  if (url[0] === '~') {
    url = path.resolve('node_modules', url.substr(1));
  }

  return { file: url };
}

Ответ 2

Мне просто нужно было установить пакет node-sass-tilde-importer:

npm install ode-sass-tilde-importer --save

А затем измените мой скрипт scss на:

node-sass --watch style.scss --importer=node_modules/node-sass-tilde-importer style.css

Вот некоторые важные части моего файла package.json:

{

  [...]

  "scripts": {
    "scss": "node-sass --watch style.scss --importer=node_modules/node-sass-tilde-importer style.css"
  },

  "dependencies": {
    "bootstrap": "^4.3.1",
    "bootstrap-material-design": "^4.1.2",
    "node-sass": "^4.12.0",
    "node-sass-tilde-importer": "^1.0.2"
  }
}