在Webpack 2中使用TypeScript加載SASS模塊

Question

我有一個使用TypeScript，ReactJS和SASS設置的簡單項目，並希望使用Webpack將其全部捆綁。 有很多關於如何使用JavaScript和常規舊CSS實現此目的的文檔。 但是，我找不到任何組合我需要的加載器的文檔，並使用Webpack 2語法（而不是加載器的原始Webpack語法）。 因此，我不確定如何創建正確的配置。

你可以在這里找到我的webpack.config.js文件 。 我如何修改配置以便TypeScript接受我的SCSS模塊，以便Webpack正確地將我的SCSS與我的TypeScript捆綁在一起？

這可能也有幫助：當我運行Webpack時，我收到以下錯誤：

ERROR in ./node_modules/css-loader!./node_modules/typings-for-css-modules-loader/lib?{"namedExport":true,"camelCase":true}!./node_modules/sass-loader/lib/loader.js!./src/raw/components/styles.scss
Module build failed: Unknown word (1:1)

> 1 | exports = module.exports = require("../../../node_modules/css-loader/lib/css-base.js")(undefined);
    | ^
  2 | // imports
  3 |
  4 |

 @ ./src/raw/components/styles.scss 4:14-206
 @ ./src/raw/components/greetings/greetings.tsx
 @ ./src/raw/index.tsx
 @ multi ./src/raw/index.tsx

ERROR in [at-loader] ./src/raw/components/greetings/greetings.tsx:3:25
    TS2307: Cannot find module '../styles.scss'.

請注意./src/raw/index.tsx是我的應用程序的入口點./src/raw/components/greetings/greeting.tsx是我唯一的React組件，和./src/raw/components/styles.scss是我唯一的SCSS文件。

Answer 1

typings-for-css-modules-loader是css-loader替代品（技術上它在引擎蓋下使用css-loader ），這意味着它需要CSS並將其轉換為JavaScript。 你也在使用css-loader ，但是因為它接收了JavaScript而失敗了，但是期望的CSS（因為JavaScript不是有效的CSS，它無法解析）。

另外，你沒有使用CSS模塊，因為你沒有在CSS加載器上設置modules: true選項（或者是將它傳遞給css-loader typings-for-css-modules-loader css-loader ）。

你的.scss規則應該是：

{
    test: /\.scss$/,
    include: [
        path.resolve(__dirname, "src/raw")
    ],
    use: [
        { loader: "style-loader" },
        {
            loader: "typings-for-css-modules-loader",
            options: {
                namedexport: true,
                camelcase: true,
                modules: true
            }
        },
        { loader: "sass-loader" }
    ]
}

Answer 2

這是一個小擴展版本（因為以上確實對我不起作用），使用從陳舊的typings-for-css-modules-loader派生的另一個包（ css-modules-typescript-loader ）。

如果有人遇到同樣的問題 - 這是一個適合我的配置：

TypeScript + WebPack + Sass

webpack.config.js

module.exports = {
  //mode: "production", 
    mode: "development", devtool: "inline-source-map",

    entry: [ "./src/app.tsx"/*main*/ ], 
    output: {
        filename: "./bundle.js"  // in /dist
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: [".ts", ".tsx", ".js", ".css", ".scss"]
    },
    module: {
        rules: [

            { test: /\.tsx?$/, loader: "ts-loader" }, 

            { test: /\.scss$/, use: [ 
                { loader: "style-loader" },  // to inject the result into the DOM as a style block
                { loader: "css-modules-typescript-loader"},  // to generate a .d.ts module next to the .scss file (also requires a declaration.d.ts with "declare modules '*.scss';" in it to tell TypeScript that "import styles from './styles.scss';" means to load the module "./styles.scss.d.td")
                { loader: "css-loader", options: { modules: true } },  // to convert the resulting CSS to Javascript to be bundled (modules:true to rename CSS classes in output to cryptic identifiers, except if wrapped in a :global(...) pseudo class)
                { loader: "sass-loader" },  // to convert SASS to CSS
                // NOTE: The first build after adding/removing/renaming CSS classes fails, since the newly generated .d.ts typescript module is picked up only later
            ] }, 

        ]
    }
}; 

還要在您的項目中放置declarations.d.ts ：

// We need to tell TypeScript that when we write "import styles from './styles.scss' we mean to load a module (to look for a './styles.scss.d.ts'). 
declare module '*.scss'; 

你需要在package.json的dev-dependencies中使用所有這些：

  "devDependencies": {
    "@types/node-sass": "^4.11.0",
    "node-sass": "^4.12.0",
    "css-loader": "^1.0.0",
    "css-modules-typescript-loader": "^2.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "typescript": "^3.4.4",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }

然后你應該在你的mystyle.d.ts旁邊找到一個mystyle.d.ts ， mystyle.scss包含你定義的CSS類，你可以將它作為Typescript模塊導入並使用如下：

import * as styles from './mystyles.scss'; 

const foo = <div className={styles.myClass}>FOO</div>; 

CSS將自動加載（作為style元素注入DOM）並包含神秘的標識符而不是.scss中的CSS類，以隔離頁面中的樣式（除非您使用:global(.a-global-class) { ... } ）。

請注意，每當您添加CSS類或刪除它們或重命名它們時， 第一次編譯都將失敗 ，因為導入的mystyles.d.ts是舊版本而不是剛編譯時生成的新版本。 再次編譯。

請享用。