angular - Webpack not styling HTML -
i'm using webpack 3.x , angular 4. i'm trying load sass style sheet component, not working.
in output file can see both html , styling content in main.js. page renders plain text , no styling applied. missing step in webpack configuration?
footer.component.ts
import { component } '@angular/core'; @component({ selector: 'h5-footer', styleurls: ['./footer.component.scss'], template: ` <main> <div class="container"> ... </div> </main>\` }) export class footercomponent {}
my webpack.config file let webpack = require('webpack');
module.exports = { entry: { main: './src/main.ts', polyfills: './src/polyfills.ts' }, output: { filename: './dll/[name].js' }, plugins: [ new webpack.dllreferenceplugin({ context: '.', manifest: require('./dll/vendor-manifest.json'), }) ], resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } }, { test: /\.ts?$/, exclude: [ /node_modules/, /\.(spec|e2e)\.ts$/ ], loader: ['awesome-typescript-loader', 'angular2-template-loader?keepurl=true'], }, { test: /\.html$/, exclude: [ /node_modules/, /index\.html$/ ], loader: 'html-loader', }, { test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader } ] } };
Comments
Post a Comment