我一直在尝试在 webpack v4 上使用 sass-loader
,但它无法在 React
组件中加载 scss
文件 typescript
。
这是一段简化的代码。
//index.tsx
import * as React from 'react';
import './styles.scss';
const Navigation = () => {
return (<div className="app-bar"></div>)
}
//styles.scss
.app-bar {
background-color: #2196f3;
}
以下代码来 self 的 webpack 配置。
module: {
rules: [
//loaders for jsx, tsx etc
{
test: /\.(css|scss)$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
},
{ loader: 'sass-loader' }
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new CleanWebpackPlugin(),
]
我关注了the official doc's example , 但它无法加载 styles.scss
。
以防万一,我重新安装了style-loader
、css-loader
、sass-loader
(和node- sass
),但并没有解决错误。
错误信息是...
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
我通过 Laravel Mix
运行 webpack,但不知道 Laravel 是否与它有任何关系。
是什么导致了这个问题?任何建议将不胜感激。
最佳答案
你不需要将 css 放在测试部分,因为 sass-loader 和 css-loader 会照顾你并将你的 scss 转换为 css 文件
下面是我的配置
{
test: /\.scss$/,
use: [
//'style-loader' was the culprit, so I just needed to remove it
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
关于reactjs - webpack:SASS 加载器失败 "Module build failed (from ./node_modules/sass-loader/lib/loader.js)",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56515066/