reactjs-使用CSS模块和Webp的Sass

我已经使用Webpack,Sass和CSS模块构建了一段时间的项目。 通常在我的require文件中,我定义一个类似以下的类:

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

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

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

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

现在,我阅读了CSS模块页面,发现像我的require一样,没有包含任何选择器,此外,它们还导入了以下样式:

import styles from './MyStyles.scss';

我以为“哇,看起来好多了,更容易看到它的导入位置,等等。而且我不希望不使用require,而默认使用本地内容。” 所以我尝试了一下,立即遇到了几个问题。

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

因为我在我的React文件上使用ESLint,所以立即引发错误:require没有默认的导出,通常这是有意义的,但是CSS模块页面指出:

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

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

2)我尝试了require

这可以通过linting,但是require日志为未定义。

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

作为参考,我的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一起使用时,我是否只能使用require:global

2)由于我使用的是webpack,这是否也意味着我只能require我的样式?

barndog asked 2020-08-03T17:35:58Z
1个解决方案
44 votes

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

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

这使我能够:1)require('./MyStyles.scss')我的Sass和2)在:local中包装我的样式。

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

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

现在,我可以按我的样式require('./MyStyles.scss'),而不必将它们包装在:local中(尽管我想如果可以的话也可以)。

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

编辑:

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

import styles from './MyStyles.scss';

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

barndog answered 2020-08-03T17:36:46Z
translate from https://stackoverflow.com:/questions/34443827/sass-with-css-modules-webpack