オブジェクトのwebpack sass loaderを使用せずに、sassクラス名をそのまま使用できますか？

Question

私はそれが

import style from './style.scss' 

class MyComponent extends Component { 

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

以下のようなものであるように、通常我々がstyle['my-button']を使用しているとして、クラス名を使用する必要がありますが、それは、オブジェクトスタイルを避け、上記のように使用することはできますか？

Answer 1

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> 
); 
} 

Answer 2

あなただけのスタイルシートをインポートすることができます。

import './style.scss'; 

Answer 3

私はこのWebPACKのコンフィグがあなたを助けることができると信じています。上記のようにクラスを使用することができます。

設定を変更した後に必ず再構築してください。以下webpack.config.jsためのコードスニペットですので、あなたが私のコメントを読んで確認してください：我々は、すべての

NOTEは...忘れています。私の場合（WebPACKの2）で、それは私が対処するために必要なものすべてです - ちょうどファイルが正常に動作する必要がありますインポートするが、それがない場合、あなたはあなたのwebpack.configをチェックする必要が

/** 
* 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 ...