Question

我试图通过十几个不同的搜索并阅读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：要求（＆＃34; CSS-装载机最小化./ file.css＆＃34;？！）

但我不确定如何实施。

谢谢！

更新：

所以在尝试了@Brandon提到的内容之后，我实际上已经在我们的条目中看到了需要css文件的代码。

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

我将其更新为：需要（＆＃39; CSS加载器最小化风格/ app.css＆＃39;！）; 但最终出现了这个错误：

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，这有意义吗？如果你们可以告诉我这个错误出现的原因，我会很感激。

再次感谢！

Answer 1

因此，在尝试找到解决加载器问题的解决方案后，我决定寻找另一种解决方案。一个名为Purify CSS Plugin的插件最终成为了答案。

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

使用装载机带来了一个未知单词＆＃39;错误。我试过的一切都改变了这个未知的词，或者没有改变这种情况。在线的所有人似乎也无法克服这个问题。

证明了解决问题的方法通常不止一种。

Answer 2

将该require语句放入您应用的某个JavaScript源文件中。如果它是一个全球性的＆＃34; css文件，然后你的应用程序的主条目JS文件是一个很好的候选人。

e.g。在app.js：

require("css-loader?minimize!./file.css"); // tell webpack about your css dependency so it can load and minimize it

尝试使用带有webpack的css-loader来最小化我们的css

2 个答案: