我一直在尝试在Webpack v4上使用sass-loader,但它无法加载TypeScript中React组件中的scss文件。这里是代码的简化片段。
下面的代码是我 webpack 配置文件中的内容。
我跟随官方文档的示例,但它无法加���
//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;
}
下面的代码是我 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(),
]
我跟随官方文档的示例,但它无法加���
styles.scss
文件。
为了确保,我重新安装了style-loader
,css-loader
,sass-loader
(和node-sass
),但这并没有解决错误。
错误信息是...
模块构建失败(来自./node_modules/sass-loader/lib/loader.js):
我通过Laravel Mix
运行webpack,但不知道Laravel是否与此有关。
是什么导致了这个问题?任何建议将不胜感激。
style-loader
! - Hiroki