首页 文章

Sass与CSS Modules＆Webpack

提问于
浏览 次
41

我一直在使用Webpack，Sass和CSS模块构建一个项目 . 通常在我的 .scss 文件中，我定义了一个类，如：

: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';

而且我认为“哇看起来好多了，它导入了's easier to see where it'，等等 . 而且我不想使用 :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[]=' + encodeURIComponent(require('node-bourbon').includePaths) +
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' + path.resolve(__dirname, '..', 'src/client/') }

在所有这些之后，我的问题是：

1）当使用带有Sass的CSS模块时，我是否仅限于使用 :local 或 :global ？

2）因为我正在使用webpack，这是否也意味着我只能 require 我的风格？

css reactjs sass webpack css-modules

1 回答

  • 44

    发布后不久，我找到了解决方案 . 这个问题，我认为很混乱，是在我的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 Modules-esque功能，尽管有些限制 .

    编辑：

    我注意到的一些事情是，未来警告任何看过这个答案的人，如果你使用eslint-plugin-import来修改你的javascript代码中的导入，它会在导入样式时引发错误：

    import styles from './MyStyles.scss';

    因为CSS模块导出生成的样式对象的方式 . 这意味着你将被要求做 require('./MyStyles.scss') 以绕过任何警告或错误 .

    回复于

相关问题