webpack：スプラッシュ画面のインラインCSS（折りたたみCSSの上に）

なぜCSSセグメントがでないのかわかります。は'style-ext-html-webpack-plugin'です。webpack：スプラッシュ画面のインラインCSS（折りたたみCSSの上に）

現在、私は.CSSファイルにスプラッシュ画面のルールを設定しています。

'extract-text-webpack-plugin'を用いてそれを抽出し、テンプレート<head>に'extract-text-webpack-plugin'で注射した。

問題は、ファイルが決して'style-ext-html-webpack-plugin'を経由して実行されないため、私はそれをどのようにデバッグするかについて頭を悩ますことができません。

（理想的には、私はそれが.envファイルを通じてテーマに対応できるように.SCSSファイルを持っているしたいと思いますつまり：。splash.scssが独占的にいくつかのテーマの色を注入された後に抽出し<head>にインライン化している）

webpack.config.js:

.... 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //used for above-the-fold css (such as splash-screen) 
const StyleExtHtmlPlugin = require('style-ext-html-webpack-plugin'); 
const extractSplashCSS = new ExtractTextPlugin('splash.css'); 

module.exports = { 
    entry: {...}, 
    output: {...}, 
    resolve: {...}, 
    plugins: [ 
     ..., 
     new HtmlWebpackPlugin({ 
      title: enviroments.TITLE, 
      splashScreenTitle: enviroments.SPLASH_SCREEN_TITLE, 
      template: 'src/index.html', 
      cache: true, 
      favicon: enviroments.FAVICON || './src/assets/images/favicon.ico', 
      inject: 'body' 
     }), 
     extractSplashCSS, 
     new StyleExtHtmlPlugin('splash.css') 
    ], 
    module: { 
     loaders: [ 
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, 
      { 
       test: /\.css$/, 
       loader: 'style-loader!css-loader!resolve-url-loader?import=false', 
       exclude: [path.join(path.resolve('./src'), 'common/app/splash.css')] 
      }, 
      { 
       test: /\.css$/, 
       loader: extractSplashCSS.extract({ 
        use: 'css-loader' 
       }), 
       include: [path.join(path.resolve('./src'), 'common/app/splash.css')] 
      }, 
      { 
       test: /\.scss$/, 
       use: [ 
        'style-loader', 
        'css-loader?importLoaders=1', 
        { 
         loader: 'postcss-loader', 
         options: { 
          plugins: function() { 
           return [require('autoprefixer')]; 
          } 
         } 
        }, 
        'resolve-url-loader?sourceMap', 
        { 
         loader: 'sass-loader?sourceMap', 
         options: { 
          includePaths: path.resolve('./src'), 
          data: ` 
           $color-primary: ${theme.PRIMARY}; 
           .... 
          ` 
         } 
        } 
       ] 
      }, 
      .... 
     ] 
    } 
};

index.js:

... 
// above the fold css 
import 'common/app/splash.css';

出典

2017-07-09 Nitsan Baleli

html-webpack-pluginを2.29.0に更新する必要がありました。

私は明示的に通常のSASSの流れからスプラッシュファイルを除外し、別のものを作成する必要がありました：私は.envファイルから変数をテーマに対応することができsassファイルを使用して、この問題を解決するために管理している

ローダー定義を明示的に指定：

... 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); //used for above-the-fold css (such as splash-screen) 
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin'); 

module.exports = { 
    ... 
    plugins: [ 
     ... 
     new HtmlWebpackPlugin({ 
      ... 
     }), 
     new ExtractTextPlugin('splash.css'), 
     new StyleExtHtmlWebpackPlugin('splash.css'), 
    ], 
    module: { 
     loaders: [ 
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, 
      { test: /\.css$/, loader: 'style-loader!css-loader!resolve-url-loader?import=false' }, 
      { 
       test: /\.scss$/, 
       exclude: [path.join(path.resolve('./src'), 'common/app/splash.scss')], 
       use: [ 
        ..... 
       ] 
      }, 

      { 
       test: /\.scss$/, 
       include: [path.join(path.resolve('./src'), 'common/app/splash.scss')], 
       use: ExtractTextPlugin.extract({ 
        use: [ 
         { 
          loader: 'css-loader', 
          options: {minimize: true} 
         }, 
         { 
          loader: 'postcss-loader', 
          options: { 
           plugins: function() { 
            return [require('autoprefixer')]; 
           } 
          } 
         }, 
         { 
          loader: 'sass-loader', 
          options: { data: `$color-primary: ${theme.PRIMARY};` } 
         } 
        ] 

       }) 
      }, 
     ] 
    } 
};

出典

2017-07-11 10:48:47

webpack：スプラッシュ画面のインラインCSS（折りたたみCSSの上に）

答えて

関連する問題