如何在 Webpack 4 中启用 SASS 模块

Posted 2023-03-06

【中文标题】如何在 Webpack 4 中启用 SASS 模块

【英文标题】：How to enable SASS Modules in Webpack 4

【发布时间】：2019-04-11 14:13:32

【问题描述】：

在我用 TypeScript 和 TSX 编写的 Node React Web 应用程序中，我使用了 CSS 模块。因此，在构建应用程序时，我指示 Webpack 从 style.css 创建一个 style.css.d.ts 文件，这样我就可以通过使用 import * as style from "./style.css"; 将 CSS 文件导入 TypeScript 类来访问它的类，就像任何其他参数一样，然后访问像这样的参数：

export class Foot extends React.Component<FootProps, > 
    render() 
        return <div className=style.foot>© MySite</div>;
    

我现在想做的是从 CSS 更改为 SASS 格式 SCSS 并基本上做同样的事情。我想要我的 SASS 文件，即 style.scss 并指示 Webpack 在构建时创建一个 style.scss.d.ts 文件。虽然我不知道该怎么做。

我的webpack.config.js中的模块规则：

module: 
    rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
         test: /\.tsx?$/, loader: "awesome-typescript-loader" ,

        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
         enforce: "pre", test: /\.js$/, loader: "source-map-loader" ,

         test: /\.css$/, use: [
            "style-loader",
             loader: "typings-for-css-modules-loader", options:  modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" 
        ] ,

         test: /\.(scss)$/, use : [
            
                // Adds CSS to the DOM by injecting a `<style>` tag.
                loader: "style-loader"
            ,
            
                // Interprets `@import` and `url()` like `import/require()` and will resolve them.
                loader: "css-loader"
            ,
            
                // Loader for webpack to process CSS with PostCSS.
                loader: "postcss-loader",
                options: 
                    plugins: function () 
                        return [
                            require("autoprefixer")
                        ];
                    
                
            ,
            
                // Loads a SASS/SCSS file and compiles it to CSS.
                loader: "sass-loader"
            
        ]
        
    ]
,

我的package.json中的依赖：

  "dependencies": 
    "@types/jquery": "^3.3.22",
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "bootstrap": "^4.1.3",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.4",
    "react": "^16.6.0",
    "react-dom": "^16.6.0"
  ,
  "devDependencies": 
    "autoprefixer": "^9.3.1",
    "awesome-typescript-loader": "^5.2.1",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.10.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "typescript": "^3.1.6",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  

如何从 CSS 模块更改为 SASS 模块？

【参考方案1】：

我在您的规则中找不到任何缺陷。最好尝试以下方法：

        test: /\.css$/,
        use: [
          'style-loader',
          
            loader: 'css-loader',
            options: 
              sourceMap: IS_DEV
            
          
        ]
      ,
      
        test: /\.(scss)$/,
        use: [
          
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: 'style-loader'
          ,
          
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader'
          ,
          
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: 
              plugins() 
                return [
                  require('autoprefixer')
                ];
              
            
          ,
          
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: 'sass-loader'
          
        ]
      

这对我有用。

【参考方案2】：

我自己发现的。所以，我把它贴在这里希望能帮助你们，如果你们有同样的问题 - +1 喜欢 如果它确实有帮助;)。

我必须注意 Bootstrap SCSS 导入，因此我必须使用 Webpack 的 exclude 和 include 功能来区分本地和全局 CSS 导入。现在一切正常，这些是我在webpack.config.js 文件中的新模块规则：

        
            test: /\.css$/,
            use: [
                 loader: "style-loader" ,
                 loader: "typings-for-css-modules-loader", options:  modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" 
            ]
        ,

        
            test: /\.scss$/,
            exclude: /\.global.scss$/,
            use : [
                 loader: "style-loader" ,
                 loader: "typings-for-css-modules-loader", options:  modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" ,
                 loader: "postcss-loader", options:  plugins: function ()  return [ require("autoprefixer") ]; ,
                 loader: "sass-loader" 
            ]
        ,

        
            test: /\.scss$/,
            include: /\.global.scss$/,
            use : [
                 loader: "style-loader" ,
                 loader: "css-loader" ,
                 loader: "postcss-loader", options:  plugins: function ()  return [ require("autoprefixer") ]; ,
                 loader: "sass-loader" 
            ]