Webpack 3.6にメインの.scssファイルをロードする方法とリアクト

Question

私は最近のカップルの時間を、Reactプロジェクトで動作するようにファイルSCSSの既存のグループにしようとしましたが、それらを使用してください。

私は以前CDN提供のスタイルでかなりミニマルなWebpack設定を行っていたので、完全なカスタムをまだ持っていない。

1. 私の主な問題は、CSSが機能していないことです。
2. このプロジェクトは現在問題なくコンパイルされています。これは単なる実験的なゴミである

   ./webpack.config.js

   const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
   
   module.exports = { 
       entry: ['./src/index.js'], 
       output: { 
       path: __dirname, 
       publicPath: '/', 
       filename: 'bundle.js' 
       }, 
       devtool: 'inline-source-map', 
       module: { 
       loaders: [ 
        { 
        exclude: /node_modules/, 
        loader: 'babel-loader', 
        query: { presets: ['react', 'es2015', 'stage-1'] } 
        }, 
        { 
        test: /\.(png|jpg)$/, 
        loader: 'url-loader?limit=8192' 
        }, 
        // { 
        //  test: /\.css$/, 
        //  use: ['style-loader', 'css-loader'] 
        // }, 
        { 
        test: /\.scss$/, 
        use: ExtractTextPlugin.extract({ 
         fallback: 'style-loader', 
         use: [ 
         'css-loader', 
         'postcss-loader', 
         'sass-loader' 
         ] 
        }) 
        } 
       ] 
       }, 
       plugins: [ 
        new ExtractTextPlugin({ 
         filename: 'css/[name]-[chunkhash].css', 
         disable: false, 
         allChunks: true 
        }), 
       ], 
       resolve: { 
       extensions: ['.js', '.jsx'] 
       }, 
       devServer: { 
       hot: false, 
       historyApiFallback: true, 
       contentBase: './', 
       port: 80 
       } 
   }; 
   

   ./postcss.config.js

   ：ここ

は私の現在のファイルです。私は後でそれに戻ってくるだろう。

module.exports = { 
    plugins: [ 
    require('autoprefixer') 
    ] 
} 

./index.html私は問題の一部であってもよい私のルートHTMLファイルにCSSやSCSS、とは何の関係もありません。もしそうなら、私は何をすべきかわからない。

./src/index.js

// ... ✂ ... 

const Root =() => (
    <ApolloProvider store={store} client={client}> 
    <Router history={history}> 
     <Route path="/" component={App} /> 
    </Router> 
    </ApolloProvider> 
) 

ReactDOM.render(
    <Root />, 
    document.querySelector('#root') 
) 

./src/components/App.js

export default ({ match: { url } }) => { 
    return (
    <div id="container"> 
     <Header /> 
     <Switch> 
     <Route path={`${url}login`} component={LoginForm} /> 
     <Route path={`${url}logout`} component={LogOut} /> 
     <Route path={`${url}signup`} component={SignUp} /> 
     <Route path={`${url}dashboard`} component={requireAuth(Dashboard)} /> 
     <Route path={`${url}profile/edit`} component={requireAuth(ProfileEdit)} /> 
     <Route path={`${url}profile`} component={requireAuth(Profile)} /> 
     </Switch> 
    </div> 
) 
} 

./src/components/auth/LoginForm.js

// ... ✂ ... 

import '../../../styles/app.scss' 

class LoginForm extends Component { 
    render() { 
    return (
     <div className="row"> 
     <div className="full-row">what</div> 
     </div> 
    ) 
    } 
} 

export default LoginForm 

上記のファイルは、私が問題を明らかにする場所です。あなたは、それはそれで使用されているclassName="row"とclassName="full-row"を持っている、と私はそれでそのCSS持っ'../../../styles/app.scss'インポートしています見ることができます：

.full-row { 
    @include flex(column); 
    align-items: center; 
    width: 100%; 
    height: 57.6rem; 
    background: yellow; 
} 

.row { 
    @include flex(column); 
    align-items: center; 
    min-width: 102.4rem; 
    background-color: pink; 
} 

を私が欲しいのは、黄色とピンクが私はSCSSがフックアップされて知っていることを確認することです。

私のwebpack.config.jsファイルが不正ですか？

LoginForm.jsでSCSSをインポートしようとしているのは間違っていますか？

私のindex.htmlファイルは何かを必要としますか？

私はSCSSをコンパイルしていません。私はそこで私を助けるためにWebpackに頼っています。

私は今までのところに基づいていくつかのポインタが必要です。

Answer 1

私はちょうど私のLoginForm.jsファイルからこの行を削除することによってそれを解決：

import '../../../styles/app.scss' 

と、このように私の./src/index.jsファイルにそれを置く：

import '../styles/app.scss' 

もの../が起こるのを待ってコードのにおいでしたとにかく

私はまた、あなたがここで見るものと.scss部分があること置き換えるために私のWebPACKの設定ファイルを更新：

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: ['./src/index.js'], 
    output: { 
    path: __dirname + '/dist', 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    devtool: 'inline-source-map', 
    module: { 
    loaders: [ 
     { 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { presets: ['react', 'es2015', 'stage-1'] } 
     }, 
     { 
     test: /\.(png|jpg)$/, 
     loader: 'url-loader?limit=8192' 
     }, 
     { 
      test: /\.scss$/, 
      loader: 'style-loader!css-loader!sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]' 
     }, 
    ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ 
      filename: 'css/[name]-[chunkhash].css', 
      disable: false, 
      allChunks: true 
     }), 
    ], 
    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 
    devServer: { 
    hot: false, 
    historyApiFallback: true, 
    contentBase: './', 
    port: 80 
    } 
}; 

が、私はこのウェブページことが判明：http://jpsierens.com/tutorial-react-redux-webpack/とした後、WebPACKのは非推奨ローダ構文に関するエラーを投げましたそのための解決策は明示的に宣言することです。

誰もがこの変更、ことを検出した場合：私は現在、このhash部分があるかわからないが、私はそれがキャッシュにいくつかのベアリングを持っている想像

{ 
    test: /\.scss$/, 
    loader: 'style-loader!css-loader!sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]' 
}, 

：これまで

{ 
    test: /\.scss$/, 
    loader: 'style!css!sass?modules&localIdentName=[name]---[local]---[hash:base64:5]' 
}, 

を私はそれを保存し、後で研究します。

何かが表示される場合は、コメントを残してください。