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

Posted 2023-03-06

【中文标题】Webpack-dev-server 不应用全局样式？

【英文标题】：Webpack-dev-server not applying global styles?

【发布时间】：2018-05-01 17:37:26

【问题描述】：

（我还是 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

非常感谢您的帮助！

【参考方案1】：

啊哈！似乎问题在于我在我的全局样式表中使用@import 来包含其他样式和也在我的组件中使用 styleUrls。我摆脱了 styleUrls，将 @imports 保留在我的全局样式表中 :)