如何在不使用任何对象 webpack sass loader 的情况下使用 sass 类名？答案

【问题标题】：How can I use sass class names as it is without using any object webpack sass loader ?如何在不使用任何对象 webpack sass loader 的情况下使用 sass 类名？
【发布时间】：2017-04-24 12:32:15
【问题描述】：

我必须像下面这样使用类名

import style from './style.scss' 

class MyComponent extends Component {

  render() {
    return <button className="my-button">OK</button>;
  }
}

通常我们使用style['my-button'] 是否可以避免对象样式并像上面一样使用？

【问题讨论】：

@shameerikka，如果您认为在其他文件中会出现 .my-button 类的重复项，请执行此操作 style['my-button']。其他明智的className="my-button" 很好（当然你必须import 文件）。 :)
@free-soul yathoo :) 我试过了，但它不起作用。我认为 webpack 中缺少一些配置

标签： css reactjs sass webpack ecmascript-6

【解决方案1】：

你可以只导入样式表：

import './style.scss';

【讨论】：

【解决方案2】：

只是导入文件应该可以正常工作，但如果没有，您必须检查您的 webpack.config - 在我的情况下（webpack 2），这就是我处理 sass 样式（单一规则）所需的全部内容：

  {
    test: /\.scss$/,
    exclude: /node_modules/,
    use: [
      'style-loader',
      'css-loader',
      'sass-loader'
    ]
  }

其他导入样式的方法，如果你只需要几个类，用es2015语法导入：

import { greenBck, btnShadow } from '../styles/main.scss';

const MyButton = () => {
  return (
    <button className="btn greenBck btnShadow">GreenButton</button>
  );
}

【讨论】：

是的，我检查了 webpack 配置。添加了localIdentName 当我删除它时它正在工作

【解决方案3】：

我相信这个 webpack 配置可以帮助你。它允许使用您上面建议的类。

确保在更改配置后重新构建。我们都忘记了...

注意：webpack.config.js 下面的代码是 sn-ps，所以请务必阅读我的 cmets。

/**
* webpack.config.js
*/

// ADD THE ExtractTextPlugin
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// ADD THIS TO YOUR PLUGINS ARRAY
new ExtractTextPlugin('[your-css].css')

// ADD THIS TO YOUR module.loaders ARRAY
{
    // sass -to-> css
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(
        'style', // The backup style loader
        'css?sourceMap!sass?sourceMap'
    )
}

/**
* react file
*/
import style from './[path]/[your-css].css.scss'

... use your classes as normal ...

【讨论】：

另请参阅@Wayne Ellery 发布的内容 - 也许这是一个单行修复！