将 sass/css 模块添加到 typescript react app

Posted 2023-02-22

【中文标题】将 sass/css 模块添加到 typescript react app

【英文标题】：Add sass/css modules to typescript react app

【发布时间】：2018-09-19 16:48:39

【问题描述】：

在一个新项目中，我需要将 scss/css 模块添加到 typescript/react 应用程序。 我在项目和 webpack.config.dev.js 中添加了“typings-for-css-modules-loader” 像这样：(here is the entire webpack.config.dev.js)

          
        test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          
            loader: require.resolve('typings-for-css-modules-loader'),
            options: 
                importLoaders: 1,
                modules: true
            ,
          ,
          
            loader: require.resolve('postcss-loader'),
            options: 
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer(
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                ),
              ],
            ,
          ,
        ],
      ,
          test: /\.scss$/,
          use: [
              require.resolve('style-loader'),
              require.resolve('sass-loader'),
              
                  loader: require.resolve('typings-for-css-modules-loader'),
                  options: 
                      namedexport: true,
                      camelcase: true,
                      modules: true
                  
              
          ]
      ,

当我将 test.scss 文件添加到我的项目时，编译成功创建了一个 test.scss.d.ts，其中包含：

export interface ITestScss 
    'toto': string;


export const locals: ITestScss;

当我尝试像这样在我的项目中导入这个 css 时：

import styles from './scss/test.scss';

我收到此错误：

Module '"/home/cyprien/projets/test/typescript-sass-modules-boilerplate/src/scss/test.scss"' has no default export. 

最后，在浏览器中，我得到了这个错误：

编译失败

./src/scss/test.scss 模块构建失败： .toto ^ “e”之后的无效 CSS：预期 1 个选择器或规则，是“exports = module.ex” 在 /home/cyprien/projets/test/typescript-sass-modules-boilerplate/src/scss/test.scss （第 1 行，第 1 列）

【参考方案1】：

找到了这个解决方案：

webpack 配置（开发），这是为了更少：

    test: /\.modules\.less$/,
    use: [
        loader: 'style-loader' // creates style nodes from JS strings
    ,
        loader: 'typings-for-css-modules-loader',
        options:
            modules:true,
            namedExport: true,
            camelCase: true,
            localIdentName:'[path][name]---[local]---[hash:base64:5]'
        
    ,
        loader: 'less-loader',
        options:  javascriptEnabled: true // compiles Less to CSS
    ]

然后将你的less文件命名为something.modules.less

在js中导入如下：

import * as styles from './something.modules.less';

并像这样使用它：

<div className=styles.yourClassName></div>

【参考方案2】：

您需要使用插件mini-css-extract-plugin。下面是一个使用 TypeScript 和 SASS SCSS 的配置示例（但没有 CSS 模块，也没有 PostCSS）：

// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = 
  mode: "development",
  devtool: "source-map",
  resolve: 
    extensions: [".ts", ".js"]
  ,
  module: 
    rules: [
      
        test: /\.ts$/,
        exclude: /node_modules/,
        use: 
          loader: "ts-loader"
        
      ,
      
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      
    ]
  ,
  plugins: [
    new MiniCssExtractPlugin()
  ]

希望你能适应它。

【讨论】：

您是否有意使用css-loader 而不是typings-for-css-modules-loader。我不能让任何一个工作。