可以将此主题视为我之前question related to webpack & ts-loader
的延续现在,我正在尝试了解如何将sass-loader
与ts-loader
和ExtractTextPlugin
一起使用。经过几个小时的挖掘,似乎ExtractTextPlugin
正在解析node_modules,因此失败了。
在下面的代码示例中,您可以看到注释部分(旧样式加载器部分)以及我尝试使用sass-loader
docs指导的新部分
目前我被困在(以及来自node_modules的许多其他类似解析问题):
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 */}