css - Webpack 构建成功但 styles.css 文件样式未反射(reflect)

Question

我正在开发一个 angular 5 的 Web 应用程序。现在我在我的应用程序中包含了 webpack 4。但是有一个问题，所有在 styles.css 文件中编写的样式都没有反射(reflect)在从 webpack 创建的构建中 .需要解决这个问题。下面是我的 webpack.common.js 文件，它用于加载我的应用程序构建中存在的不同类型的文件总是成功，但 styles.css 代码没有反射(reflect)在我的站点在浏览器中加载时。但是在组件 .scss 文件中编写的代码正确反射(reflect)我已经搜索了很多但没有找到解决这个问题的任何解决方案，为什么会发生。

import styles from './styles.css';
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
  entry: {
    'polyfill': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

  resolve: {
    extensions: ['.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: ['awesome-typescript-loader','angular2-template-loader','angular-router-loader'
        ],
        exclude:[/node_modules/]
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/images/[name].[hash].[ext]'
      },
      {
        test: /\.(css|scss)$/,
        include: helpers.root('src', 'app'),
        loaders: ['css-loader']
    },

      {
        test: /\.js$/,
        include: helpers.root('src', 'app'),
        loader: 'babel-loader',
        exclude:[/node_modules/],
        query:{
          presets:['es2015']
        }


      }
    ]
  },
plugins: [
    // Workaround for angular/angular#11580
    new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows
      /angular(\\|\/)core(\\|\/)@angular/,
      helpers.root('./src'), // location of your src
      {} // a map of your routes
    ),
    new ExtractTextPlugin("src/styles.css"),


    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

Answer 1

您应该使用 @import 从您的主 css/scss 样式表导入您的 css 样式表。

不要从 webpack 配置文件中导入 css 文件作为 javascript 模块。这没有意义。