1

ExtractTextPlugin を使用して sass から単一の css ファイルを生成し、webpack ローダーを介したインポートを介して reactjs アプリ内で使用できるように webpack を構成しました。

sass ファイルの使用は、react コンポーネントの import ステートメントによって検出され、出力ファイルが生成されますが、生成される main.css ファイルは空であり、インポートは空のスタイル オブジェクトを返します。間違っている？

構造

client
  - app
    - components
      - navbar
        Navbar.js
        navbar.scss
  - public
    - styles
      main.scss
    bundle.js
    index.html

Webpack 構成

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

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');

const config = {
   entry: APP_DIR + '/index.js',
   output: {
     path: BUILD_DIR,
     filename: 'bundle.js'
  },
  externals: {
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      },
      {
        test: /\.scss$/,
        include : APP_DIR,
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App'
    }),
    new ExtractTextPlugin('styles/main.css', {
      allChunks: true
    })
  ]
};

module.exports = config;

navbar.scss

.navbar {
  display: flex;

  .navbarBrand {

  }
}

Navbar.js

import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'
import Login from '../login/Login'
import Logout from '../logout/Logout'
import styles from './navbar.scss';


export default class Navbar extends Component {

  render() {
    const { isAuthenticated, errors, onLogin, onLogout } = this.props;

    console.log(styles);
    const navBarStyles = classnames(styles.navbar);
    const navBarBrandStyles = classnames(styles.navbarBrand);

    return (
        <nav className={navBarStyles}>
          <div className='container-fluid'>
            <a className={navBarBrandStyles} href="#">User Management App</a>
            <div className='navbar-form'>

              {!isAuthenticated &&
                <Login
                    errors={errors}
                    onLoginClick={ (creds) => onLogin(creds) }
                />
              }

              {isAuthenticated &&
                <Logout onLogoutClick={() => onLogout()} />
              }

            </div>
          </div>
        </nav>
    )
  }
}

Navbar.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
  errors: PropTypes.arrayOf(PropTypes.string),
  onLogin: PropTypes.func.isRequired,
  onLogout: PropTypes.func.isRequired
};

症状

ローダーとインポート(もはや問題ではありません。以下の回答を参照してください)

  1. console.log(styles) = オブジェクト {}

  2. styles.navbar = 未定義

プラグイン

  1. public/styles/main.css が空です(もはや問題ではありません。以下の回答を参照してください)

質問

  1. Narbar.js にスタイルをインポートするときに、スタイルが空のオブジェクトになるのはなぜですか? 何を間違って設定しましたか? （私は解決策を見つけ、回答セクションで以下の回答を提供しました）
  2. public/style/main.css が空なのはなぜですか? （私は解決策を見つけ、回答セクションで以下の回答を提供しました）
4

2 に答える 2

0
  1. 空のファイルについては、プロジェクトの 1 つでこのプラグインを使用する方法を次に示します ( Webpack@2.2, ExtractTextPlugin v2 )。

プラグインのインスタンス化

const extractSCSS = new ExtractTextPlugin({
    filename: "[name].scss",
    allChunks: true
});

ローダ

{
    test: /\.(css|scss)$/,
    loader: extractSCSS.extract({
        loader: [
            {
                loader: "css-loader",
                options: { modules: true }
            },
            {
                loader: "sass"
            }
        ],
        defaultLoader: "style-loader"
    })
}

プラグイン

plugins: [extractSCSS],

このプロジェクトでこれをサンプリングした完全なWebpack構成をチェックアウトできます

于 2017-01-24T02:01:20.457 に答える