Question

我当前正在使用故事书，并且在为自定义组件导入CSS文件时遇到问题。我有一个自定义JS和CSS文件，可创建一个自定义HTML元素，并将JS文件导入到storybook.js文件中。

这是我的webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: true,
        },
      },
    ],
  },
};

但是，问题是，当我检查组件时，我的id选择器之一更改为

#my_id {
    position: relative;
    margin: 1rem 1rem;
    width: calc(100% - 2rem);
    height: 0.1rem;
}

变成这样

#_2mi2YFOpgJGU5rtfy7l3RI {
    position: relative;
    margin: 1rem 1rem;
    width: calc(100% - 2rem);
    height: 0.1rem;
}

我需要做些什么吗？我认为问题出在CSS加载程序

Answer 1

您尝试将选项更改为此：

options: {
  modules: true,
  importLoaders: 1,
  localIdentName: '[hash:base64:5]'
}

css-loader在结果css文件中更改id名称

1 个答案: