7

_color.scss変数として 400 色で構成されるファイルがあります。そして、スタイルでこの色変数を必要とする 20 個のコンポーネントが好きです。

スタイルを構築するために SCSS + CSS モジュールを使用しています。今のところ、私はこれ_color.scssをすべてのコンポーネントのstyle.scss.

例：

component1.scss

@import "color.scss";

component2.scss

@import "color.scss";

component3.scss

@import "color.scss";

以前は、SCSS スタンドアロンを使用していたときに、color.scssを自分index.scssにインポートし、その下にある他のすべてのスタイルをインポートしていました。これにより、変数はすべてのコンポーネントで使用できるようになります。

例：

//index.scss
@import "color.scss";
@import "component1.scss";
@import "component2.scss";
@import "component3.scss";

これで、下のすべての変数が、および_color.scssの下で使用できるようになります。component1.scsscomponent2.scsscomponent3.scss

でこれと同様のことを行う方法はありCSS Modules + SCSSますか? グローバル変数を宣言する単一の場所?

4

1 に答える 1

5

私が今使っている方法はかなりきれいに見えます。ということで、皆様にシェアです。

sass-resources-loaderを使用する

これにより@import、すべての.scssファイルに が含まれscss、css modules.

webpack@2.xx構成_

...
    module: {
      rules: [
        {
          test: /\.scss$/,
          loaders: [
            'style-loader',
            'css-loader?modules&importLoaders=1&localIdentName=[path][name]__[local]__[hash:base64:10]',
            'sass-loader',
            'sass-resources-loader',
            'import-glob-loader',
            'postcss-loader',
          ],
        },
     },
     plugins: [
       new webpack.LoaderOptionsPlugin({
        options: {
          postcss: [
            autoprefixer(),
          ],
          sassResources: [
            './app/constants/_style-variables.scss', //include your scss imports here
          ],
          context: path.resolve(__dirname, '../../')
        }
      })
     ]
...
于 2016-11-24T04:54:07.353 に答える