如何在 Webpack 4 中启用 SASS 模块

Question

在我用 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 模块？

Answer 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'
          }
        ]
      }

这对我有用。

Answer 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" }
            ]
        }