1

我创建了 TSDXreact-with-storybook项目，但发现我无法导入 CSS 模块。运行时出现问题npm start：

✖ Failed to compile
(typescript) Error: G:/projects/design-system/src/index.tsx(2,19): semantic error TS2307: Cannot find module './style.module.css' or its corresponding type declarations.
Error: G:/projects/design-system/src/index.tsx(2,19): semantic error TS2307: Cannot find module './style.module.css' or its corresponding type declarations.
    at error (G:\projects\design-system\node_modules\rollup\dist\shared\node-entry.js:5400:30)
    at throwPluginError (G:\projects\design-system\node_modules\rollup\dist\shared\node-entry.js:11878:12)
    at Object.error (G:\projects\design-system\node_modules\rollup\dist\shared\node-entry.js:12912:24)
    at Object.error (G:\projects\design-system\node_modules\rollup\dist\shared\node-entry.js:12081:38)
    at RollupContext.error (G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:17237:30)        
    at G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:25033:23
    at arrayEach (G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:545:11)
    at Function.forEach (G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:9397:14)
    at printDiagnostics (G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:25006:12)
    at Object.transform (G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:29277:17)

以下是我的一些想法：

// webpack.config.js
const path = require('path');

module.exports = async ({ config, mode }) => {
    config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
};

// .storybook/main.js
module.exports = {
    stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        {
            name: 'storybook-addon-sass-postcss',
            options: {
                sassLoaderOptions: {
                    implementation: require('sass'),
                },
            },
        },
    ],
    typescript: {
        check: true,
    }
};

这些步骤都没有帮助（既不单独也不一起）。我能用它做什么？主要目标是将SCSS文件作为组件中的模块导入React。

4

0 回答 0