角度2样式URL不起作用

Question

我不确定这里缺少什么。我已按照https://angular.io/guide/component-styles上的指南使用组件样式URL。但是，当我运行组件时，没有应用样式。但是，如果我使用组件内联样式，则可以使用。

training.component.ts

@Component({
templateUrl: './training.component.html',
styleUrls: ['./training.component.css']
})

training.component.html

<p class="notification-message" style="margin-bottom:10px;">IMPORTANT NOTE: You must click the “I agree” box and press the Finish button on the last page of this document in order to receive credit for completing this training module</p>    

training.component.css

.notification-message {
border: 2px solid black;
background-color: #ffff00;
color: #ff0000;
width: 100%;
text-align: left;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 2px;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
font-weight: bold;
}

webpack.common.js

module: {
    rules: [
      {
          test: /\.ts$/,
          loaders: [
            {
                loader: 'awesome-typescript-loader',
                options: { configFileName: helpers.root('', 'tsconfig.json') }
            }, 'angular2-template-loader'
          ]
      },

      {test: /\.html$/,loader: 'html-loader'},
      { test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, loader: 'url-loader' },
      { test: /\.css$/, loader: 'raw-loader!css-loader' }

    ]
},

plugins: [

 new CleanWebpackPlugin(['built'], { root: '' }),

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

  new webpack.optimize.CommonsChunkPlugin({
      name: "commoncode",        
      filename: "commoncode.js",
      chunks: ["app", "vendor", 'kendoVendor'],
      minChunks: Infinity,
  }),


   new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery"
   })

   /*in order to automatically load bundled js files on layout page, use this plugin and do appropriate changes.
    new HtmlWebpackPlugin({
        inject: false,
        template: './Views/Shared/_LayoutTemplate.cshtml',
        filename: './Views/Shared/_Layout.cshtml'
    })*/
]

有效的组件内联样式

@Component({
templateUrl: './training.component.html',
styles: [`
.notification-message {
border: 2px solid black;
background-color: #ffff00;
color: #ff0000;
width: 100%;
text-align: left;
padding-left: 6px;
padding-right: 6px;
padding-bottom: 2px;
font-size: 11px;
font-family: Verdana, Helvetica, Sans-Serif;
font-weight: bold;
}`]})

Answer 1

我能够确定问题所在。我必须在webpack配置中使用to-string-loader。

这在 webpack.common.js

中对我有用

{
     test: /\.(css)$/,
     loaders: ['to-string-loader', 'css-loader']
}