4

TLDR:css-modules通常のと組み合わせる方法sass、できれば でwebpack。

セットアップ:

私は、e コマース Web サイトのスタイリング ビルド プロセスに取り組んでいます。現在、サイトのスタイルは、 gulp browserifyビルド プロセスを通じてjsと共にsassで作成されています。

最近、react with webpackおよびbabelを使用して構築された単一ページ アプリを追加しました。そのアプリケーション内で、webpackによって提供されるcss-modulesを利用して、クラス名を各反応コンポーネントにスコープします。

問題：

css-modulesサイトのメインのスタイリング バンドルにwebpack ビルドのスタイルを組み込みたいと考えています。これを行うために、サイト全体のスタイルを構築するための webpack 構成を構築することを検討していました。私が抱えている問題は、単一ページの webpack 構成によって現在構築されているスタイルを取得し、サイト全体のスタイルを処理するグローバルな webpack 構成にスタイル チャンクだけを挿入する方法です。2 つの構成を可能な限り分離したいと思います。

質問：

  • 一方が他方からチャンクを使用できる Webpack ビルドを分離する適切な方法はありますか?

  • もしそうなら、css-moduleセットアップが単一ページ構成にとどまりextract-text-webpack、退屈なsassビルドに伴う部分がグローバル構成になるようにするにはどうすればよいですか?

  • css-modulesそうでない場合、sass の 1 つのセクションをワークフローに通し、それをサイトの残りの部分のバンドルと組み合わせるにはどうすればよいでしょうか。

前もって感謝します。

@Alexandr Subbotinの回答に基づいて編集し、Webpackを更新して以下のコードのようにしました。コードは雇用主のものであるため、名前とパスを変更する必要がありました。そのため、わずかなエラーがある可能性があります。

var ExtractTextPlugin = require('extract-text-webpack-plugin');

const JSDIR = './build/js/';
const STYLES = './build/css/bundle.css';

module.exports = {
    entry : {
        'styles'   : './src/styles.scss',
        'app'      : './src/index.js',
        // a javascript file that includes the root of the single page app.
        'single-page' : './src/single-page/styles-entry.js', 
    },
    output : {
        path     : JSDIR,
        filename : '[name].js', // normally compiles my 
        publicPath: 'http://localhost:8080/',
    },
    module: {
        loaders: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader : 'babel-loader',
            query : {
                presets: [
                    'react','es2015','stage-0',
                ]
            },
          },
          {
            test : /\.scss$/,
            loader: ExtractTextPlugin.extract('style?sourceMap', 'css?-url&sourceMap!sass?sourceMap'),
            exclude : /\/single-page\//,
          },
          {
            test : /\.scss$/,
            loader: ExtractTextPlugin.extract(
              'style?sourceMap',
              'css?-url&modules&importLoaders=1&localIdentName=SinglePage__[name]__[local]!sass?sourceMap'
            ),
            include : /\/single-page\//,
          }
        ]
    },
    plugins : [
      new ExtractTextPlugin(STYLES, {
          allChunks : true,
      }),
    ],
    resolve : {
        alias: {
            "eventEmitter/EventEmitter": "wolfy87-eventemitter",
      },
      extensions: ['', '.js','.jsx'],
    },
}
4

1 に答える 1