1

私は十数回の検索を試み、css-loader のドキュメントを読んでみましたが、それらは最新ではないと思います。

また、フロントエンドのjavascript / jqueryからの反応コードと規則を学ぼうとしているので、これは私にとって新しいことです。

私がやりたいのは、css を取得し、css-loader を使用して最小化することですが、読んだことからこれを行う方法がわかりません。

現在のコードの一部は次のようになります - prod.config.js :

import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import PurifyCSSPlugin from 'purifycss-webpack-plugin';

import baseConfig from './base.config';

const PUBLIC_PATH = '//d1yepz0pwej23y.cloudfront.net/assets/' + process.env.TRAVIS_BUILD_NUMBER + '/';

export default {
  ...baseConfig,
  output: {...baseConfig.output, publicPath: PUBLIC_PATH },
  module: {
      loaders: [
    ...baseConfig.module.loaders, {
      test: /\.(woff|woff2|eot|ttf|otf|svg)(\?v=[0-9].[0-9].[0-9])?$/,
      loader: 'file?name=[sha512:hash:base64:7].[ext]',
      exclude: /node_modules\/(?!font-awesome)/
    }, {
      test: /\.(jpe?g|png|gif|svg)$/,
      loader: 'file?name=[sha512:hash:base64:7].[ext]!image?optimizationLevel=7&progressive&interlaced',
      exclude: /node_modules\/(?!font-awesome)/
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss'),
      exclude: /node_modules/
    }
  ]
},
plugins: [
  // extract css
  new ExtractTextPlugin('[name]-[chunkhash].css'),

  // set env
  new webpack.DefinePlugin({
    'process.env': {
      BROWSER: JSON.stringify(true),
      NODE_ENV: JSON.stringify('production')
    }
  }), ...

  ...baseConfig.plugins
]
};

これを機能させる方法について提案するには、これで十分ですか？または、どこで詳細情報を入手できるかを提案してください。

ドキュメントには、次のような css を要求する必要があると書かれています: require("css-loader?minimize!./file.css")

しかし、実装方法がわかりません。

ありがとう！

アップデート：

したがって、@Brandonが言及したことを試した後、私は実際にエントリにcssファイルを必要とするコードを見ました。

if (process.env.BROWSER) {
  require('styles/app.css');
}

それを次のように更新しました: require('css-loader?minimize!styles/app.css'); しかし、このエラーで終わった：

ERROR in ./~/css-loader?minimize!./app/styles/app.css
Module build failed: CssSyntaxError: /css-loader!/Users/homeImac/workspace/node_modules/style-loader/index.js!/Users/homeImac/workspace/node_modules/css-loader/index.js?sourceMap!/Users/homeImac/workspace/node_modules/postcss-loader/index.js!/Users/homeImac/workspace/app/styles/app.css:5:1: Unknown word

しかし、その単語は@importです。これは意味がありますか? このエラーが表示される理由を教えていただければ幸いです。

再度、感謝します！

4

2 に答える 2

3

そのため、ローダーの問題を解決する解決策を見つけようとした後、別の解決策を探すことにしました。Purify CSS Plugin というプラグインが最終的に答えになりました。

new PurifyCSSPlugin({
  purifyOptions: { info: true, minify: true }
})

ローダーを使用すると、「不明な単語」エラーが発生しました。私が試したすべてのことは、未知の単語をシフトするか、状況を変えるために何もしませんでした. オンラインのすべての人々も、この問題を克服できなかったようです。

通常、問題を解決する方法は複数あるという事実を証明しています。

于 2016-07-13T03:08:10.940 に答える
0

その require ステートメントをアプリの JavaScript ソース ファイルの 1 つに挿入します。「グローバル」css ファイルの場合は、アプリのメイン エントリ JS ファイルが適しています。

例app.js：

require("css-loader?minimize!./file.css"); // tell webpack about your css dependency so it can load and minimize it
于 2016-07-08T21:07:31.983 に答える