css - 减少对生产 webpack 配置的支持(来自 Facebook 的 create-react-app)

Question

我已经从 Facebook 的 create-react-app 中 fork (或弹出)元素，需要添加一些额外的工具(例如测试、redux、less 等)，并且可能天真的假设稍微偏离路径不会有太大问题。

我想我已经使用以下 webpack.config.dev.js 设法减少了添加:

//......
module: {
preLoaders: [
  {
    test: /\.js$/,
    loader: 'eslint',
    include: paths.appSrc,
  }
],
loaders: [
  // Process JS with Babel.
  {
    test: /\.js$/,
    include: paths.appSrc,
    loader: 'babel',
    query: require('./babel.dev')
  },
  {
    test: /\.css$/,
    loader: 'style!css!postcss'
  },
  {
    test: /\.less$/,
    loader: 'style!css!postcss!less'
  },
  {
    test: /\.json$/,
    loader: 'json'
  },
  //......
  }
]
},//.....

我已将 CSS 加载程序留在那里(可能是不正确的)，以便我可以引入 react/bootstrap 库。也许有更好的方法。

无论如何，我对如何将预处理器添加到 webpack.config.prod.js 感到困惑。这是一个片段(带有 Facebook 的有用评论):

loaders: [
  // Process JS with Babel.
  {
    test: /\.js$/,
    include: paths.appSrc,
    loader: 'babel',
    query: require('./babel.prod')
  },
  // The notation here is somewhat confusing.
  // "postcss" loader applies autoprefixer to our CSS.
  // "css" loader resolves paths in CSS and adds assets as dependencies.
  // "style" loader normally turns CSS into JS modules injecting <style>,
  // but unlike in development configuration, we do something different.
  // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
  // (second argument), then grabs the result CSS and puts it into a
  // separate file in our build process. This way we actually ship
  // a single CSS file in production instead of JS code injecting <style>
  // tags. If you use code splitting, however, any async bundles will still
  // use the "style" loader inside the async code so CSS from them won't be
  // in the main CSS file.
  {
    test: /\.css$/,
    // "?-autoprefixer" disables autoprefixer in css-loader itself:
    // https://github.com/webpack/css-loader/issues/281
    // We already have it thanks to postcss. We only pass this flag in
    // production because "css" loader only enables autoprefixer-powered
    // removal of unnecessary prefixes when Uglify plugin is enabled.
    // Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets
    // including CSS. This is confusing and will be removed in Webpack 2:
    // https://github.com/webpack/webpack/issues/283
    loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
    // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
  },

如何以稳定且高效的方式添加更少的预处理器步骤？

对于上下文，我的 index.js 导入如下所示:

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import { CommentsSectionContainer } from './components/CommentsSection';
import './index.less';

Answer 1

从 npm 或 yarn 安装 less 和 less-loader:

npm install --save-dev less less-loader

点击此链接安装 extract-text-webkit-plugin:

https://github.com/webpack/extract-text-webpack-plugin

首先，您需要在 loaders 数组中添加加载器，在 css 可能对可读性有意义之后。它看起来像这样:

{
  test: /\.less$/, 
  loader:  ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}

然后在plugins数组中初始化插件:

new ExtractTextPlugin('[name].css')

Thaaaaaat 应该用另一个 yarnpkg start