css - Webpack-dev-server 不应用全局样式？

Question

(我还是 Angular 5/Webpack 的新手，所以对于任何误解我深表歉意!)当我运行“webpack-dev-server”时，它会加载我的所有样式，除了我的全局样式表 styles.scss，其中包含将边距和填充重置为 0 的代码。但它能够加载所有其他 html 和 css，并且可以在我更改代码时更新。但奇怪的是，当我运行“ng serve”时，全局样式表应用得很好，边距和填充都消失了!

据我所知，加载程序正在将 scss 正确地转换为 css，但由于某种原因，捆绑变得一团糟。也许我在将文件捆绑在一起的方式上做错了什么？我已经对配置文件中的规则搞乱了很多次，所以我可能不小心搞砸了一些模块之间的交互，使捆绑变得一团糟。

我一直在寻找那些遇到过类似错误的人，他们现在一整天都无法让他们的全局样式在开发服务器上工作，但我认为我可能在寻找错误的东西。感谢您的帮助!

下面是我的 webpack 配置文件(webpack.common.js、webpack.dev.js——实际的 webpack.config.js 文件只包含一个单行代码，说明它需要 webpack.dev.js)，我的索引.html 文件、我的 package.json 和我的文件树的图片。

webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
  },

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

  node: {
    fs: 'empty'
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract("style-loader", "css!sass")
      }
    ],
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: helpers.root('tsconfig.json') }
          } , 'angular2-template-loader'
        ],
        exclude: [/\.(spec|e2e)\.ts$/]
      },
      {
        test: /\.html$/,
        loader: 'raw-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.scss$/,
        use: ['to-string-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.json$/,
        use: 'json-loader'
      }
    ]
  },

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

    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'vendor', 'polyfills']
    }),

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

    new ExtractTextPlugin({
      filename: 'style.css',
      disable: false,
    })
  ]
};

webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

module.exports = webpackMerge(commonConfig, {
  devtool: 'cheap-module-eval-source-map',

  output: {
    path: helpers.root('dist'),
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js'
  },

  plugins: [
    new ExtractTextPlugin('[name].css')
  ],

  devServer: {
    historyApiFallback: true,
    stats: 'minimal',
    port: 3000
  }
});

package.json

{
  "name": "project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "webpack-dev-server --config config/webpack.dev.js --progress --color --hot",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "webpack-dev-server": "webpack-dev-server",
    "webpack": "webpack"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.1",
    "@angular/common": "^5.0.1",
    "@angular/compiler": "^5.0.1",
    "@angular/core": "^5.0.1",
    "@angular/forms": "^5.0.1",
    "@angular/http": "^5.0.1",
    "@angular/platform-browser": "^5.0.1",
    "@angular/platform-browser-dynamic": "^5.0.1",
    "@angular/router": "^5.0.1",
    "core-js": "^2.5.1",
    "es6-shim": "^0.35.3",
    "lodash": "^4.17.4",
    "rxjs": "^5.5.2",
    "ts-loader": "^3.1.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.0",
    "@angular/compiler-cli": "^5.0.1",
    "@angular/language-service": "^5.0.1",
    "@types/core-js": "^0.9.43",
    "@types/jasmine": "^2.5.54",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^6.0.92",
    "@types/webpack": "^3.8.1",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.3.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "codelyzer": "~3.2.0",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.2",
    "style-loader": "^0.19.0",
    "to-string-loader": "^1.1.5",
    "ts-node": "^3.2.2",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4",
    "webpack-merge": "^4.1.1"
  }
}

file tree

非常感谢您的帮助!

Answer 1

啊哈!看来问题是我在我的全局样式表中使用了@import 来包含其他样式并且也在我的组件中使用了styleUrls。我摆脱了 styleUrls，在我的全局样式表中保留了@imports :)