:local(.button) { color: white; }
在我的React组件中,在render方法中,我需要样式:
render = () => { const styles = require('./MyStyles.scss'); <div className={ styles.button } /> }
和所有是好的与世界。一切正常工作。
现在今天我通过CSS Modules page阅读,并注意到没有一个选择器包括:local()像我的,而且他们正在导入样式:
import styles from './MyStyles.scss';
我想“哇,看起来更好,它更容易看到它的进口,等等,我不喜欢使用:local(),只是有默认的本地的东西。所以我试过,并立即遇到了几个问题。
1)`import styles from’./MyStyles.scss’;
因为我在我的React文件使用ESLint,我立即得到一个错误抛出,MyStyles.scss没有一个默认导出通常是有意义的,但CSS模块页面声明:
When importing the CSS Module from a JS Module,it exports an object with all mappings from local names to global names.
所以我自然希望样式表的默认导出是他们所指的对象。
2)我尝试从’./MyStyles.scss导入{button}
这通过linting但按钮日志为未定义。
3)如果我还原到require方法导入我的样式,任何未指定为:local是undefined。
作为参考,我的webpack加载器(我也包括Node-Neat和Node-Bourbon,两个真棒库):
{ test: /.(scss|css)$/,loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) + '&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' + path.resolve(__dirname,'..','src/client/') }
我的问题,所有这一切,是:
1)当使用CSS模块与Sass,我限于使用:local或:global?
2)因为我使用webpack,这是否也意味着我只能要求我的样式?
解决方法
loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap
这使我能够1)需要我的Sass和2)包装我的样式:local。
但是,css加载程序缺少modules选项,因此它看起来像:
loader: 'style!css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap
现在我可以导入我的样式,我不必包装他们:local(虽然我认为我仍然可以,如果我想)。
我发现最有趣的是,没有模块选项,仍然可以使用CSS模块的特性,虽然有点限制。
编辑:
我注意到,一个未来的警告,任何人谁看这个答案,是如果你使用eslint-plugin-import来删除你的javascript代码中的导入,它会在导入样式时抛出一个错误:
import styles from './MyStyles.scss';
因为CSS模块导出结果样式对象的方式。这意味着你需要做require(‘./ MyStyles.scss’)来绕过任何警告或错误。