由于.scss文件中的导入,React SCSS模块不起作用

时间:2019-04-26 10:19:45

标签: css reactjs typescript webpack sass

我正在尝试在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模块?我觉得我已经接近了,但是犯了一些小错误。

0 个答案:

没有答案