javascript - webpack不输出css

Question

情况

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

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

import './scss/style.scss'

问题

CSS 文件应位于输出文件夹 ( dist ) 中。
编译完成，没有错误，但build文件夹中没有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 规则

{
    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
]

<小时/>

您可能还想看看here .