webpack does not output css

Question

>情况

我有一个 webpack 设置，其中我有一个规则，使用 extract-text-webpack-plugin 和 sass-loader 从.ts文件中提取 CSS 和/或 SASS。

我将 SCSS 文件导入单独的.ts文件

import './scss/style.scss'

问题

CSS 文件应位于输出文件夹 ( dist (。
编译完成且没有错误，但构建文件夹中没有 CSS 文件。

这是我的 webpack 配置：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var styleString = require('css-to-string-loader');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({
  filename: "[name].css",
  disable: process.env.NODE_ENV === "development"
});
var helpers = require('./helpers');
var isProd = process.env.NODE_ENV === 'production';
module.exports = {
    entry: {
        polyfills: './src/polyfills.ts',
        vendor: './src/vendor.ts',
        app: isProd ? './src/main.aot.ts' : './src/main.ts'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [{
                test: /.ts$/,
                loaders: [
                    'babel-loader',
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
                            configFileName: isProd ?
                                helpers.root('tsconfig-aot.json') :
                                helpers.root('tsconfig.json')
                        }
                    },
                    'angular2-template-loader'
                ],
                exclude: [/node_modules/]
            },
            {
                test: /.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /.html$/,
                loader: 'html-loader'
            },
            {
                test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[ext]'
            },
            {
                test: /.(json)$/,
                loader: 'file-loader?name=assets/mocks/[name].[ext]'
            },
            {
              test: /.(css|scss)$/,
              loaders: ['to-string-loader', 'css-loader', 'sass-loader']
          }
        ]
    },
    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\|/) piece accounts for path separators in *nix and Windows
            /angular(\|/)core(\|/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

Answer 1

原因

没有输出 CSS 文件的原因是因为您没有使用

const extractSass = new ExtractTextPlugin({
    filename: "[name].css",
    disable: process.env.NODE_ENV === "development"
});

在你的 CSS |SCSS rule

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

---

溶液

您必须像这样使用 use 属性：

{
    test: /.(css|scss)$/,
    use: extractSass.extract({ // <==== Right here, note the "extractSass"
        use: [
            { loader: "to-string-loader" },
            { loader: "css-loader" },
            { loader: "sass-loader" }
        ],
        fallback: "style-loader"
    })
}

并将 ExtractTextPlugin 实例 ( extractSass ( 添加到您的plugins数组中：

plugins: [
    extractSass
]

---

您可能还想看看这里。