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 源文件之一中。如果它是一个“全局”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 回答