Angular 网页包2样式表未加载

我最近更新了我的应用程序（最新版本）Angular@4.1.3)从Webpack1.x到

Webpack2.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')]
    }

---

我设法使样式表正常工作

关键插件包括：

ExtractTextPlugin

-用于组合多个CSS文件

CopyWebpackPlugin

-复制到dist

PurifyCSSPlugin

-删除未使用的css

优化cssassetsetplugin

-缩小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)
};

---

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

是否应该使用

装载机
键
{test://\.scss$/，loaders:['to-string-loader'，css loader'，sass loader']}
@VadimB根据链接加载程序时的规则，应使用
use:[loader1，loader2]
。