ts-loader与sass-loader& ExtractTextPlugin

时间:2018-01-13 18:08:04

标签: reactjs typescript webpack

可以将此主题视为我之前question related to webpack & ts-loader

的延续

现在,我正在尝试了解如何将sass-loaderts-loaderExtractTextPlugin一起使用。经过几个小时的挖掘,似乎ExtractTextPlugin正在解析node_modules,因此失败了。

在下面的代码示例中,您可以看到注释部分(旧样式加载器部分)以及我尝试使用sass-loader docs指导的新部分

目前我被困在(以及来自node_modules的许多其他类似解析问题)enter image description here

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); // <-- as soon as this is imported, the build fails

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


module.exports = env => {
    return {
        devtool: "inline-source-map",
        entry: "./src/index.tsx",
        output: {
            path: path.resolve(__dirname, "/public"),
            filename: "build/app.js"
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js", ".json", ".scss"],
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    exclude: path.resolve(__dirname, "/node_modules"),
                    loader: "ts-loader",
                },
                {
                    test: /\.scss$/,
                    exclude: path.resolve(__dirname, "/node_modules"),
                    use: extractSass.extract({
                        use: [
                            {
                                loader: "style-loader",
                                exclude: path.resolve(__dirname, "/node_modules")},
                            {
                                loader: "css-loader",
                                exclude: path.resolve(__dirname, "/node_modules")},
                            {
                                loader: "sass-loader",
                                exclude: path.resolve(__dirname, "/node_modules"),
                                options: {
                                    includePaths: [path.resolve(__dirname, "/src")],
                                }
                            },
                        ],
                    }),
                }
                // {
                //     test: /\.scss$/,
                //     loader: 'style-loader!css-loader!sass-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
                // }
            ],
        },
        plugins: [
            extractSass,
        ]
    }
}


N.B。没有ExtractTextPlugin我将.scss导入.tsx文件时会得到一个空对象。所以,如果你能帮助我解决这个问题,我会很高兴(并且能够继续编码):)

import * as styles from "./Main.scss"; // <-- styles is {/* empty object */}

0 个答案:

没有答案