使用 Webpack 2 在 Angular 4 中包含 sass 文件答案

【问题标题】：Including sass files in Angular 4 with Webpack 2使用 Webpack 2 在 Angular 4 中包含 sass 文件
【发布时间】：2017-12-12 09:32:53
【问题描述】：

我正在尝试在使用 webpack 2.2.1 的 Angular 4.3.5 Web 应用程序中将 scss 文件与我的组件一起使用。顺便说一句，我目前不能使用 angular-cli。

这是我的加载器的 webpack.config 文件部分。

        {
            test: /\.scss$/,
            loader: 'raw-loader!postcss-loader!sass-loader'
        },

        // all css required in src/app files will be merged in js files
        {
            test: /\.less$/,
            loader: 'raw-loader!postcss-loader!less-loader'
        }

如您所见，我还有一个用于 less 的加载器，当组件使用较少的文件时它可以正常工作。

这是我的测试组件。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test-component',
  templateUrl: './test-component.component.html',
  styleUrls: ['./test-component.component.scss'],
})
export class TestComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

当我运行 npm run build 时，出现以下错误。

Error: Expected 'styles' to be an array of strings.

我查看了无数其他帖子并搜索了高低，但无论我如何更改加载程序或更新 webpack 或使用 extracttextplugin，我都无法阻止此错误的发生。

任何帮助将不胜感激。

【问题讨论】：

在加载器数组中尝试类似 {test: /\.styl$/, 加载器: ['raw-loader', 'stylus-loader']}, {test: /\.less$/ , 加载器: ['raw-loader', 'less-loader']}, {test: /\.scss$|\.sass$/, 加载器: ['raw-loader', 'sass-loader']}
包括样式 {test: /\.styl$/, loaders: ['raw-loader', 'stylus-loader']}

标签： angular sass webpack-2

【解决方案1】：

这是我的配置加载器：

const appRoot = path.resolve(__dirname, './app');

    loaders: [
        { exclude: [/node_modules/, /Scripts/], test: /\.js$/, loader: 'source-map-loader' },
        { exclude: [/node_modules/, /Scripts/], test: /\.ts$/, loader: 'tslint-loader' },
        { test: /\.ts$/, exclude: [/\.(e2e\-spec|e2e)\.ts$/], loaders: ['angular2-template-loader', 'awesome-typescript-loader?configFileName=./Client/tsconfig.json', 'angular2-router-loader'] },
        { include: appRoot, test: /\.css$/, loaders: ['raw-loader'] },
        //{ include: appRoot, test: /\.less$/, loaders: ['style-loader', 'less-loader'] },
        { include: appRoot, test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'sass-loader'] },
        { exclude: appRoot, test: /\.css$/, loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader'] }) },
        {
            test: /\.less$/, loader: ExtractTextPlugin.extract({
                fallbackLoader: 'style-loader',
                loader: ['css-loader', 'less-loader' ]
            })
        },
        { exclude: appRoot, test: /\.scss$|\.sass$/, loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'sass-loader'] }) },
        { test: /\.json$/, loader: 'json-loader' },
        { test: /\.(jpg|jpeg|png|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } },
        { test: /\.html$/, loader: 'html-loader' },
        { test: /\.(otf|woff|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 25000 } },
        { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', query: { limit: 25000, mimetype: 'font/woff2' } },
        { test: /\.eot$/, loader: 'file-loader' }
    ]

但更好的方法是使用Angular-cli，只修改一个参数：

 "styleExt": "scss"

【讨论】：