Webpack 2のスタイルシートがロードされていません

Question

Webpack 1.xのアプリケーション（最新のAngular@4.1.3）がWebpack 2.6.1に最近更新されました。マイグレーションドキュメントの指示に従って、アプリケーションを実行すると、外部スタイルシートが読み込まれません。スタイルは.scssを使用しています。開発者ツールのコードを調べると、スタイルは完全に空になります。私はスタイルシートを機能させるために管理されていた

{ 
     test: /\.css$/, 
     use: ['to-string-loader', 'css-loader'] 
    }, 

    /** 
    * To string and sass loader support for *.scss files (from Angular components) 
    * Returns compiled css content as string 
    * 
    */ 
    { 
     test: /\.scss$/, 
     use: ['to-string-loader', 'css-loader', 'sass-loader'] 
    }, 

    /** 
    * Raw loader support for *.html 
    * Returns file content as string 
    * 
    * See: https://github.com/webpack/raw-loader 
    */ 
    { 
     test: /\.html$/, 
     use: 'raw-loader', 
     exclude: [helpers.root('src/index.html')] 
    } 

Answer 1

：

は、これは私がローダーのために使用していますものです。

キープラグインは以下のとおりです。

ExtractTextPlugin - CopyWebpackPlugin複数のCSSファイルを結合するために - コピーAssests PurifyCSSPluginをDISTする - OptimizeCssAssetsPlugin未使用のCSSを削除 - 縮小化のcssファイルをENVため=以下

を構築webpack.config.jsですファイル：

const path = require('path'); 

// To remove unused css 
const PurifyCSSPlugin = require('purifycss-webpack'); 
// Copy Assests to dist 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
// For combining multiple css files 
const ExtractTextPlugin = require('extract-text-webpack-plugin') 
// Minify css files for env=build 
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 



let buildPlugins = []; 
let basePath = path.join(__dirname, '/../'); 

if (env === EnvEnum.BUILD) { 
    // minify css files if env is build i.e. production 
    buildPlugins.push(new OptimizeCssAssetsPlugin()); 
} 

module.exports = { 
    // Entry, files to be bundled 
    entry: { 
    'myStyle.min.css': [ 
     basePath + '/src/styles/app.css', 
     basePath + '/src/styles/other.css', 
     basePath + '/src/bower_components/abc.min.css' 
    ] 
    }, 
    devtool: '', 
    output: { 
    // Output directory 
    path: basePath + '/dist/styles/', 
    // [hash:6] with add a SHA based on file changes if the env is build 
    filename: env === EnvEnum.BUILD ? 'myStyle-[hash:6].min.css' : '[name]' 
    }, 
    // Rules for bundling 
    module: { 
    rules: [{ 
     test: /\.css$/i, 
     use: ExtractTextPlugin.extract({ 
     use: { 
      loader: 'css-loader', 
      options: { 
      // ExtractTextPlugin tries to process url like in backgroun-image, url(), etc. We need to stop that behavior so we need this option 
      url: false 
      } 
     } 
     }) 
    }, { 
     // Load all possible images included in css 
     test: /\.(jpe?g|png|gif|svg|ico)$/i, 
     loaders: [ 
     'file-loader?name=images/[sha512:hash:base64:7].[ext]', 
     'image-webpack-loader?progressive=true&optimizationLevel=7&interlaced=true' 
    ] 
    }, { 
     // Load all possible fonts format files included in css 
     test: /\.(ttf|eot|svg|woff2?)(\?v=[a-z0-9=\.]+)?$/i, 
     include: basePath + '/src/bower_components', 
     loader: 'file-loader?name=fonts/[name].[ext]' 
    }] 
    }, 
    resolve: { 
    alias: {}, 
    modules: [ 
     'src/bower_components/', 
    ], 
    extensions: ['.css', '.eot', '.woff', '.svg'] 
    }, 
    plugins: [ 
    // Bundling of entry files 
    new ExtractTextPlugin((env === EnvEnum.BUILD ? 'myStyle-[hash:6].min.css' : '[name]')), 
    // Copy css/images/fonts/js file(s) to dist 
    new CopyWebpackPlugin([{ 
     from: basePath + '/src/bower_components/components-font-awesome/fonts', 
     to: basePath + '/dist/fonts/' 
    }, { 
     from: basePath + '/src/fonts', 
     to: basePath + '/dist/fonts/' 
    }]), 
    // To remove unused CSS by looking in corresponding html files 
    new PurifyCSSPlugin({ 
     // Give paths to parse for rules. These should be absolute! 
     paths: glob.sync([ 
     path.join(basePath, 'src/*.html'), 
     path.join(basePath, 'src/*.js') 
     ]) 
    }) 
    ].concat(buildPlugins) 
}; 

あなたがそれ以上のコンセプトを持っているかどうか教えてくださいrns。