通过 SASS 支持搜索 React Components Library with Typescript、SASS 和 CSS 模块的 Webpack 配置

Question

就像标题所说的那样，我正在为通过 SASS 支持 Typescript、SASS 和 CSS 模块的 React 组件库寻找一个有效的 Webpack 配置。如果有人有一个并想在这里分享，我将不胜感激。

Answer 1

创建 tsconfig.json 文件

{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}

安装开发依赖项

npm install webpack webpack-cli webpack-dev-server typescript ts-loader style-loader css-loader sass-loader --save-dev

然后创建 webpack.config.js

const path = require('path');
module.exports = {
entry: path.join(__dirname, '/app.ts'),
output: {
filename: 'app.js',
path: __dirname
},
module: {
rules: [
{
test: /.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
}
};