Tag: css modules

Sass与CSS模块和Webpack

我一直在使用Webpack，Sass和CSS模块构build一个项目。 通常在我的.scss文件中，我定义了一个类如下： :local(.button) { color: white; } 在我的React组件中，在render方法中，我需要样式： render = () => { const styles = require('./MyStyles.scss'); <div className={ styles.button } /> } 和世界都好。 一切都按预期工作。 现在我正在阅读CSS模块页面 ，注意到没有一个select器被:local()包含在内，而且他们导入的样式如下： import styles from './MyStyles.scss'; 我认为“哇，看起来更好，更容易看到它的import等，而我不想使用:local() ，只是本地默认情况下。 所以我试了一下，立即遇到了几个问题。 1）`从./MyStyles.scss'导入样式; 因为我在我的React文件上使用了ESLint，所以我马上得到一个错误： MyStyles.scss没有默认的导出，这通常是有意义的，但CSS模块页面声明： 从JS模块导入CSS模块时，它会导出一个包含从本地名称到全局名称的所有映射的对象。 所以我自然希望样式表的默认导出也是他们所指的对象。 2）我试着import { button } from './MyStyles.scss'; 这通过linting，但button日志为未定义。 3）如果我恢复到导入我的样式的require方法，任何未指定的:local是未定义的。 作为参考，我的webpack加载器（我也包括Node-Neat和Node-Bourbon ，两个很棒的库）： { test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + […]