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 - 缩小env = build

的css文件

以下是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)
};

如果您有任何进一步的顾虑，请告诉我。

Webpack 2样式表无法加载

1 个答案: