1

我已将 webpack 配置为使用 ExtractTextPlugin 从 sass 生成单个 css 文件，并允许它通过 webpack 加载器导入在 reactjs 应用程序中可用。

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;

导航栏.scss

.navbar {
  display: flex;

  .navbarBrand {

  }
}

导航栏.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. 样式.navbar = 未定义

插件

  1. public/styles/main.css 为空（不再是问题，请参阅下面的答案）

问题

  1. 为什么在 Narbar.js 中导入样式时它是一个空对象？我配置错了什么？（我已经找到了解决方案，并在下面的答案部分提供了答案）
  2. 为什么 public/style/main.css 是空的？（我已经找到了解决方案，并在下面的答案部分提供了答案）
4

2 回答 2

1

sass-loader 已修复。

关键是css-loader的add modules=true，然后你可以从scss文件中导入你的样式。

{
            test: /\.scss$/,
            loader: extractCSS.extract('style', 'css?modules=true!sass?sourceMap=true')
          }

public/style/main.css 已修复。

老实说，我不确定有什么区别，但现在填充了 public/styles/main.css 文件。

我所做的唯一更改是对 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');

let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin('styles/[name].css', { allChunks: true });

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$/,
        loader: extractCSS.extract('style', 'css?modules=true!sass?sourceMap=true')
      }
    ]
  },
  plugins: [
    generateHtml,
    extractCSS
  ]
};

module.exports = config;
于 2017-01-24T02:59:48.737 回答
0
  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 回答