我正在尝试在Typescript的React应用程序上设置SCSS模块。我的.scss文件之一的标题看起来像这样:
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/";
由于我需要变量,函数等这一事实。但是,webpack对我尝试这样做并不满意。
error in ./src/main/webapp/app/modules/profile/components/profile-menu/profile-menu.module.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@import "node_modules/bootstrap/scss/variables";
^
Expected "{".
stdin 2:249 root stylesheet
in /home/adrianpop/CRESCDI/projects/jhipster/gateway/src/main/webapp/app/modules/profile/components/profile-menu/profile-menu.module.scss (line 2, column 249)
[....]
@ ./src/main/webapp/app/app.tsx
@ ./src/main/webapp/app/index.tsx
@ multi (webpack)-dev-server/client?http://localhost:9060 (webpack)/hot/dev-server.js react-hot-loader/patch ./src/main/webapp/app/index
请注意,简单的import './profile-menu.scss';
效果很好,但是以import css from './profile-menu.module.scss';
导入(具有相同SCSS代码的单独文件)不再起作用。我发现很难在React(Typescript)中设置SCSS模块。同时,该项目不是使用create-react-app
生成的,而是使用JHipster生成的,因此大多数在线教程都不起作用,或者结构与我的完全不同。
现在,webpack.dev.js
看起来像这样:
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', {
loader: 'sass-loader',
options: {
implementation: sass
}
}
]
},
{
test: /\.module\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
},
'postcss-loader',
'sass-loader',
]
}
]
}
我还需要在typings.d.ts
中添加以下代码,以便Typescript将.scss文件识别为模块。
declare module '*.scss' {
const content: {[className: string]: string};
export = content;
}
我的错误在哪里,如何正确配置webpack以支持React中的(S)CSS模块?我觉得我已经接近了,但是犯了一些小错误。