Angular Webpack设置:使用webpack从css迁移到sass

Question

我担心这个问题可能太宽泛了，但我希望在我的webpack设置方面得到一些帮助。

我用Angular有一个很大的均值堆栈设置。该解决方案目前在功能上使用的是一个Webpack版本。

到目前为止，我使用的是纯css文件，这些文件在组件声明中由Angular引用，例如：

@Component({
  selector: 'something',
  templateUrl: 'template',
  styleUrls: ['some_component_style.css', 'other.css']
})

然而，我计划在将来将我所有的css文件迁移到sass文件，但是我有点不确定我如何在Webpack中设置它。

以下是我目前对webpack的配置：

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$/, // for legacy purposes
                use: [{ loader: 'raw-loader' }]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|tff|eot|ico)$/,
                use: [{ loader: 'file-loader?name=assets/[name].[hash].[ext]' }]
            }
        ],
    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：

const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

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.join(__dirname + '/public/js/app'),
        filename: 'bundle.js',
        publicPath: '/js/app/',
        chunkFilename: '[id].[hash].chunk.js'
    },

    module: {
        rules: [
            {
                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                loader: '@ngtools/webpack'
            },
            {
                test: /\.ts$/,
                use: [
                    'awesome-typescript-loader',
                    'angular2-template-loader',
                    'angular-router-loader?aot=true'
                ]
            }
        ]
    },

    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: false
        }),
        new AngularCompilerPlugin({
            tsConfigPath: './tsconfig.json',
            entryModule: './assets/app/app.module#AppModule',
            sourceMap: true
        })
    ]
});

和我来自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'",
  },

我意识到使用sass设置解决方案，可能会从具有完全不同的结构中受益良多。例如，我使用过不使用'styleUrls‘角度标签的解决方案，因为sass不是为此设置的。但是只为整个站点生成了一个很大的css文件。我猜这是这个问题的那种“记住”，但主要的问题是：

如何从使用css文件迁移到使用webpack的sass文件？(我使用的是webpack 3.x版)

Answer 1

你的webpack配置没问题。

您可以始终混合使用全局scss和组件scss，正如您所说的那样，角度样式声明隔离了每个组件的css (或scss)，这是您想要的特性。

但是如果你想要增加全局样式，你可以这样做：

在/src/ styles.scss /文件夹中创建样式

从您的app.module.ts (项目的根模块)中，只需像这样导入scss文件(显然选择正确的路径)：

import '../styles/styles.scss';

现在，您可以使用styles.scss导入将全局应用于您的项目的其他scss (或css)文件。

以下是我在styles.scss中的项目中的一个示例：

@import '_bootstrap_settings.scss';
@import "~bootstrap/scss/bootstrap";
@import '~c3/c3';

// Angular Material Theme
@import "~@angular/material/prebuilt-themes/indigo-pink";

@import 'variables';