33
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

webpack/sass-loaderでimport毎に共通ファイルを読み込ませる

Last updated at Posted at 2017-03-26

Webpackを使ってReactなどのコンポーネントファイルから同じ粒度に分割したCSS/Sassを書いているとき、
Sassの変数やmixinなど、Globalにimportしておきたいファイルについて頭を悩ませることがあります。

sass-loaderdata optionを設定するとうまいこと実現できます。
sass-loader/environment-variables

先に言っておくと、 datanode-sass を通して Libsass へオプションをそのまま通しているだけのようです。
node-sass/data

サンプルコード

##Webpack設定

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /.scss?$/,
        use: [
          "style-loader",
          "css-loader",
          {
          loader: 'sass-loader',
          options: {
            data: "@import 'global-imports.scss';",
            includePaths: [path.resolve(__dirname, 'app/styles/')]
          },
        }],
        exclude: /node_modules/,
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 8080
  }
};

Reactのビルドを含めているため、ごちゃごちゃしていますね。
関係のある部分だけを抽出します。

      {
        test: /.scss?$/,
        use: [
          "style-loader",
          "css-loader",
          {
          loader: 'sass-loader',
          options: {
            data: "@import 'global-imports.scss';",
            includePaths: [path.resolve(__dirname, 'app/styles/')]
          },
        }],
        exclude: /node_modules/,
      }

data には String が設定可能で、これはsass/loaderによって読み込まれたファイルの先頭に自動的に差し込まれます。

この例では app/styles/_global-imports.scss にimportしたいファイルをまとめて記述することとし、styles/_global-imports.scss から変数設定用ファイルをimportして、各コンポーネントで変数の値を利用しています。

includePaths は絶対パスでimport時に読みに行くPathを追加しています。
node_modules/ 以下をこちらに含めればnpmでインストールしたライブラリの一部分を利用することもできるかもしれませんね。

まとめ

Sassというと、一つのCSSに全てを統合する使い方をイメージしますが、こういった柔軟なコンパイルをすることも可能なようです。
sass-loaderのドキュメントでは環境毎に異なった変数設定ファイルを読み込む使用例が紹介されています。

以上です。

追記(2020年4月5日)

sass-resources-loader を利用しても同じことができます。

33
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?