Webpack 2样式表未加载

Question

我最近更新了我的应用程序（当前在Angular@4.1.3）从Webpack 1.x到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 - 对于合并多个CSS文件 CopyWebpackPlugin - 复制入资产价值到dist PurifyCSSPlugin - 删除未使用的CSS OptimizeCssAssetsPlugin - 压缩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。