Question

在用TypeScript和TSX编写的Node React Web应用程序中，我使用了CSS模块。因此，在构建应用程序时，我指示Webpack从style.css.d.ts中创建一个style.css文件，这样我就可以像其他任何参数一样通过使用{{1 }}，然后像这样访问参数：

import * as style from "./style.css";

我现在想做的就是从CSS更改为SASS格式的SCSS，基本上可以做同样的事情。我想拥有我的SASS文件，即export class Foot extends React.Component<FootProps, {}> { render() { return <div className={style.foot}>© MySite</div>; } }，并指示Webpack在构建时创建一个style.scss文件。虽然我不知道该怎么做。

我的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

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

如何在Webpack 4中启用SASS模块

2 个答案: