Сборка Webpack выполнена успешно, но стиль файла styles.css не отражается - PullRequest
Новая
       7

Сборка Webpack выполнена успешно, но стиль файла styles.css не отражается

0 голосов
/ 26 июня 2018

Я разрабатываю веб-приложение на угловом уровне 5. Теперь я включил веб-пакет 4 в свое приложение. Но есть проблема, все стили , написанные в файле styles.css, не отражаются в сборке, созданной из веб-пакета . Нужно решение этой проблемы. Ниже приведен мой файл 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'
    })
  ]
};

1 Ответ

0 голосов
/ 26 июня 2018

Вы должны импортировать свою таблицу стилей css, используя @import из своей основной таблицы стилей css / scss.

НЕ импортируйте файл css как модуль javascript из файла конфигурации webpack. Это не имеет смысла.

...