webpack 不输出 css

Question

情况

我有一个 webpack 设置，我有一个规则，使用 extract-text-webpack-plugin 和 [=] 从 .ts 文件中提取 CSS and/or SASS 15=]。

我将 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
]

您可能还想看一看 here。

webpack 不输出 css

webpack does not output css

javascript

webpack

sass-loader

extracttextwebpackplugin

情况

问题

原因

解决方案