Angular 2:Scss将不会通过Webpack投入生产

问题描述 投票:1回答:1

在开发模式下,一切正常:

在此处输入图片说明

在生产中:

在此处输入图片说明

我的webpack.config.common.js:

var webpack = require('webpack');

module.exports = {
    entry: {
        'app': './assets/app/main.ts'
    },

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

    module: {
        rules: [
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.css$/,
                use: [{ loader: 'raw-loader' }]
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['raw-loader', 'sass-loader'] 
            }
        ],
        exprContextCritical: false

    }
};

webpack.config.dev.js:

var path = require('path');

var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');

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

    output: {
        path: path.resolve(__dirname + '/public/js/app'),
        publicPath: "/js/app/",
        filename: 'bundle.js',
        chunkFilename: '[id].chunk.js'
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {loader: 'awesome-typescript-loader', options: {
                        transpileOnly: true
                    }},
                    {loader: 'angular2-template-loader'},
                    {loader: 'angular-router-loader'}
                ]
            }
        ]

    }
});

webpack.config.prod.js:

var path = require('path');

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common.js');

module.exports = webpackMerge.smart(commonConfig, {
    entry: {
        'app': './assets/app/main.aot.ts'
    },

    output: {
        path: path.resolve(__dirname + '/public/js/app'),
        filename: 'bundle.js',
        publicPath: '/js/app/',
        chunkFilename: '[id].[hash].chunk.js'
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular-router-loader?aot=true'
                ]
            }
        ]
    },

    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: false
        })
    ]
});

package.json中的脚本:

  "scripts": {
    "start": "node ./bin/www",
    "build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch",
    "build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'",
    "build:sass": "node-sass assets/app/ -o assets/app",
    "watch:sass": "npm run build:sass && node-sass assets/app/ -wo assets/app/"
  }

最后,在.ts文件中导入样式的示例:

styleUrls: ['./auth.component.scss','../common/common.scss']

显然,在...之前,我调用了脚本来编译Scs。

有人看到错误或遗漏的东西吗? 谢谢

更新:在开发中,因为手表处于活动状态并且Webpack正在运行(或者类似的事情,因为我可以在chrome的开发人员栏中看到),如果我在没有它的情况下运行,则无法提供CSS。

更新2:

我找到了一种使其在生产环境中工作的方法,但在开发中崩溃了:

var webpack = require('webpack');

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractSass = new ExtractTextPlugin({
    filename: "bundle.css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    entry: {
        'app': './assets/app/main.ts'
    },

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

    module: {
        rules: [
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /\.css$/,
                use: [{ loader: 'raw-loader' }]
            },
            {
                test: /\.scss$/,
                use: extractSass.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    fallback: "style-loader"
                })
            }],
        exprContextCritical: false
    },
    plugins: [
        extractSass
    ]
};
angular sass webpack-2
1个回答
2
投票

解决了:

只需导入SCSS文件,而不是在组件中使用“ styleUrls”即可。 因此,它在开发和生产中均有效。

import './auth.component.scss';
import '../common/common.scss';

@Component({
  selector: 'tep-auth',
  templateUrl: './auth.component.html'
  providers: []
})

备注:

1)在生产中,我创建了一个CSS捆绑包(请参阅Webpack配置)

2)必须像正常的css文件一样,将捆绑软件导入视图。

© www.soinside.com 2019 - 2024. All rights reserved.