Sass与CSS模块和Webpack

n狗

我已经使用Webpack,Sass和CSS模块构建项目已有一段时间了。通常,在我的.scss文件中,我定义一个类,例如:

:local(.button) {
    color: white;
}

在我的React组件中,在render方法中,我需要以下样式:

render = () => {
    const styles = require('./MyStyles.scss');
    <div className={ styles.button } />
}

世界一切都很好。一切正常。

今天,我阅读了CSS Modules页面,发现没有一个选择器被我的包围:local(),而且它们导入的样式如下:

import styles from './MyStyles.scss';

而且我想:“哇,看起来好多了,更容易看到它的导入位置。等等。我很乐意不使用它:local(),而默认将它们放在本地。” 所以我尝试了一下,立即遇到了几个问题。

1)`从'./MyStyles.scss'导入样式;

因为我在我的React文件上使用ESLint,所以我立即抛出一个错误,该错误MyStyles.scss没有默认导出,通常这是有意义的,但是CSS模块页面指出:

从JS模块导入CSS模块时,它会导出一个对象,该对象具有从本地名称到全局名称的所有映射。

因此,我自然希望样式表的默认导出也成为他们所引用的对象。

2)我试过 import { button } from './MyStyles.scss';

这可以通过linting,但button记录为undefined。

3)如果我恢复require导入样式方法,则未指定的内容均未:local定义。

作为参考,我的webpack加载器(我还包括Node-NeatNode-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,这是否也意味着我只能使用require自己的样式?

n狗

发布后不久,我想出了解决方案。我认为这很令人困惑的问题是在我的Webpack配置中。最初,我的装载机看起来像:

loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap

这使我能够1)require我的Sass和2)将样式包裹在中:local

但是,css加载器缺少该modules选项,因此它看起来像:

loader: 'style!css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap

现在我可以import样式了,而不必将其包装:local(尽管我想如果可以的话也可以)。

我发现所有这一切最有趣的是,没有modules选择,尽管有些限制,但仍然可以使用CSS模块式功能。

编辑:

我注意到的一个警告,无论看这个答案的人如何,将来都会警告您,如果您使用eslint-plugin-import填充javascript代码中的导入,将在导入样式时引发错误:

import styles from './MyStyles.scss';

由于CSS模块导出结果样式对象的方式。那确实意味着您将被要求require('./MyStyles.scss')绕过任何警告或错误。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章