代码之家  ›  专栏  ›  技术社区  ›  jmindel

在网页包2中加载带有TypeScript的SASS模块

  •  5
  • jmindel  · 技术社区  · 7 年前

    我有一个使用TypeScript、ReactJS和SASS设置的简单项目,并希望使用Webpack将其打包。关于如何使用JavaScript和常规的旧CSS实现这一点,有很多文档。然而,我找不到任何结合我需要的加载程序并使用Webpack 2语法(而不是加载程序的原始Webpack语法)的文档。因此,我不确定如何创建正确的配置。

    webpack.config.js file here .

    这可能也很有帮助:当我现在运行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 ./src/raw/components/styles.scss 是我唯一的SCSS文件。

    2 回复  |  直到 7 年前
        1
  •  7
  •   peterjwest    7 年前

    这个 typings-for-css-modules-loader css-loader css加载器

    modules: true CSS加载程序上的选项(或 css模块加载程序的键入 ,将其传递给 ).

    .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" }
        ]
    }
    
        2
  •  4
  •   frevd    6 年前

    这是一个稍微扩展的版本(因为上面的内容不知何故对我不起作用),使用另一个包( css-modules-typescript-loader typings-for-css-modules-loader

    TypeScript+网页包+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

      "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.scss 包含您定义的CSS类,您可以将其作为Typescript模块导入并如下使用:

    import * as styles from './mystyles.scss'; 
    
    const foo = <div className={styles.myClass}>FOO</div>; 
    

    style :global(.a-global-class) { ... } ).

    请注意

    享受