Webpack scss扩展错误:编译失败。找不到资源文件

Question

我在一个angular2应用上工作，使用的是webpack作为编译器，

我的webpack.config

​

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/app/main.ts',
    resolve: {
        extensions: ['.js', '.ts']
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                loaders: ['html-loader']
            },
            {
                test: /\.css$/,
                loaders: ['raw-loader']
            },
            {
                test: /\.scss$/,
                loaders: ['raw-loader', 'sass-loader']
            }
        ],
        exprContextCritical: false
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

​

我的webpack.config.dev

​

var path = require('path');

var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common');

module.exports = webpackMerge(commonConfig, {
    devtool: 'cheap-module-eval-source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        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' }
                ]
            }
        ]
    },
    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

​

还有我的webpack.config.prod

​

var path = require('path');

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common');

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
const extractSass = new ExtractTextPlugin({
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = webpackMerge(commonConfig, {
   entry: './src/app/main.aot.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: '[hash].js',
        chunkFilename: '[id].[hash].chunk.js'
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    { loader: 'awesome-typescript-loader'},
                    { loader: 'angular2-template-loader' },
                    { loader: 'angular-router-loader?aot=true' }
                ]
            },
           {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style", "css!sass?")
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        extractSass
    ],
    postcss: [
        Autoprefixer
    ]
});

​

下面是我的npm构建过程

​

 "build": "webpack-dev-server --inline --progress --port 8080 --config webpack.config.dev.js",
    "build:prod": "del-cli dist && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'src/app/**/*.js' 'src/app/**/*.ngfactory.ts' 'src/app/**/*.js.map' 'src/app/**/*.shim.ts' 'src/app/**/*.ngsummary.json' 'src/app/**/*.ngstyle.ts' 'dist/app'"

​

问题是，当我运行npm run build everythings时，一切工作正常，但如果我运行npm run build:prod，它将返回一个错误，实际上它无法访问我的scss文件

我的general.scss中有一个示例

​

@import 'colour-palette';

​

因此它返回错误

​

Error: Compilation failed. Resource file not found  D:/git/path/path-path/front/src/app/shared/scss/colour-palette

​

我已经尝试了很多方法，但都不起作用，如果有人有解决方案，我会非常高兴。

Answer 1

试着替换这个

{
 test: /\.scss$/,
 loader:ExtractTextPlugin.extract("style", "css!sass?")
 }

使用

{
 test: /\.scss$/,
 loader:extractSass.extract("style", "css!sass?")
 }