web-dev-qa-db-ja.com

react + webpackを使用しているときに、絶対パスを使用してカスタムscssをインポートする方法

Scssファイル内で、広く使用されているカスタムのscssチャンク（React/SASS/Webpackスタック内）をインポートしようとしています。

共有ミックスインを使用できるようにします。

MyAdminButtonを作成していて、プロジェクトのすべてのボタンに関係するscssファイルをインポートするとします。 （ベンダー/外部ではなく、カスタムscssです）。

次のようになります。

//this actually works but it is a code smell : what if the current file moves ?
@import "../../stylesheets/_common-btn-styles.scss";

.my-admin-btn {
    // here I can use a shared mixin defined in _common-btn-styles.scss
}

私のscssファイルを移動すると、すべてが壊れているので、これは良くないように思えます。

ご協力いただきありがとうございます

cssreactjssasswebpack
18
bdavidxyz

見つかりました。実際には、ここで説明されているように、webpack.config.jsonでsass-loaderを構成できます。 https://github.com/jtangelder/sass-loader

関連する部分は次のとおりです。

sassLoader: {
   includePaths: [path.resolve(__dirname, "./some-folder")]
}
25
bdavidxyz