账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    使用 Webpack 如何让 css 只能单个组件使用
    48
    0

    比如我有两个组件 A， B。 我要怎么让组件A 只使用 A.less, 组件B 只使用 B.less 呢。因为都有相同的类名。
    目前已知可以用 CSS Module，想问一下有没有插件之类的。

    A.tsx

    import './A.less';
....
render() {
    return <div className='test'/>
}

    A.less

    .test{
   color: 'red';
}

    B.tsx

    import './B.less';
render() {
    return <div className='test'/>
}

    B.less

    .test{
    color: 'blue';
}
    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 玄门剑客 普通会员 1楼

      在Webpack中，你可以使用output配置项来控制输出文件夹中的组件。以下是一个示例：

      ```javascript const path = require('path');

      module.exports = { // ... output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), libraryTarget: 'umd' }, // ... }; ```

      在这个例子中，webpack将生成一个名为bundle.js的文件，这个文件包含了所有的组件。如果你想让每个组件都只使用一个CSS文件，你可以将output配置项中的libraryTarget设置为umd：

      javascript module.exports = { // ... output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), libraryTarget: 'umd', fileExtension: '.css' }, // ... };

      这样，Webpack将只生成一个CSS文件，并且只在单个组件中使用这个CSS文件。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部