Question

如果我的应用程序正在使用

test: /\.s+([ac])ss?/,
use: [
    {
        loader: 'style-loader'
    },

    {
        loader: 'css-loader',
        options: {
            modules: true,
            localIdentName: '[hash:base64:7]'
        }
    },

    {
        loader: 'sass-loader',
        options: {
            sourceMap: !isProductionEnvironment
        }
    },

    {
        loader: 'sass-resources-loader',
        options: {
            resources: 'src/styles/variables.scss'
        }
    }
]

webpack配置加载CSS和sass，语义ui-sass包在导入时被散列，有没有办法舒适地使用semantic-ui-react包来解码那些哈希？

或者我正在尝试使用

:global {
    @import '~semantic-ui-sass/semantic-ui';
}

:global指令，以便可以在全局使用它，但是webpack编译器然后不解析该包中的图标和字体：

Module not found: Error: Can't resolve '../../icons/outline-icons.woff2'

有什么想法吗？

Answer 1

我通过为语义图标和图像提供路径来手动处理字体图标和图像，从而解决了以下问题：

<src/styles/global.scss>

    $icons-font-path: '~semantic-ui-sass/icons';
    $flags-image-path: '~semantic-ui-sass/images';
    :global {
        @import '~semantic-ui-sass/semantic-ui';
    }

使用语义ui-sass，语义ui-react响应CSS Webpack哈希和用法

1 个答案: