web-dev-qa-db-ja.com

Node-sassはチルダを理解していません

最近リリースされたAngular2のRC1のangular-cliを調べると、奇妙な問題に直面しました。node-sassのsassプラグイン内のangular-cliは、パッケージ名が次のエラーをスローする前に~を解析しません。

Error: File to import not found or unreadable: ~@angular2-material/core/style/theme-functions

これは、次のコードのコンパイル中に発生します。

@import "~@angular2-material/core/style/theme-functions";

チルダを外せばすべて大丈夫です。それは正しい振る舞いですか、それともnode-sassに~を理解させるための道がありますか？

P.S。 WebStormを使用していますが、~も使用することを好みます。チルダを省略すると、パスを解決できないという文句が表示されます。そして、いくつかのグーグルの後、チルダなしでコードを使用することはレガシーであり、~をベストプラクティスとして使用する必要があることがわかりました。正しいですか？

node.jsangularsass
12
Lodin

チルダパスの解決はwebpackが行うことであり、node-sassにはそのようなリゾルバーが組み込まれていません。 sass-loader forwebpackにはこれがあります。代わりに 独自のインポート解像度を書く することができます。

完全を期すために、カスタムインポーターを使用してwebpack/sass-loaderなしでそれを行う方法を次に示します。

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

  return { file: url };
}
23
Dominic

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"
  }
}
0
Jules Colle