Question

我正在用angular 5开发一个Web应用程序，现在我已经在应用程序中包含了webpack4。但是存在一个问题，所有用styles.css文件编写的样式都不能反映在从webpack创建的版本中。需要解决此问题的方法。 下面是我的webpack.common.js 文件，该文件用于加载应用程序构建中存在的不同类型的文件始终会成功，但是styles.css代码不会反映在我的网站加载到浏览器中。但是写在组件.scss文件中的代码可以正确显示。我进行了很多搜索，但没有找到解决此问题的任何方法。

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模块导入。这没有意义。

Webpack构建成功，但styles.css文件样式未反映

1 个答案: