Как включить модули SASS в Webpack 4

Question

В моем веб-приложении Node React, написанном на TypeScript и TSX, я использую модули CSS. Следовательно, при создании приложения я инструктирую Webpack создать файл style.css.d.ts из style.css, чтобы я мог обращаться к его классам, как к любому другому параметру, импортировав файл CSS в класс TypeScript с помощью import * as style from "./style.css";, а затем получить доступ к параметры как это:

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

Я узнал это сам. Итак, я выкладываю это здесь в надежде помочь вам, ребята, если у вас есть такая же проблема - + 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" }
            ]
        }

Answer 2

Я не могу найти ни одного недостатка в ваших правилах. Лучше попробуйте следующее:

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

Это работает для меня.