Question

目前使用webpack并加载open sans是不行的。一切都需要成为一个.css文件吗？

ERROR in ./~/css-loader!./~/postcss-loader!./src/containers/LoginLayout/styles.scss
Module build failed: Error: ENOENT: no such file or directory, open '/Users/mikejames/projects/app/node_modules/open-sans-fontface/sass/_variables.css'
    at Error (native)
 @ ./src/containers/LoginLayout/styles.scss 4:14-132

webpack config

'use strict';

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const precss = require('precss');

const DEV = process.env.NODE_ENV !== 'production';

const config = {
  entry: ['./src/index.js'],
  debug: DEV,
  devtool: DEV ? 'source-map' : 'source-map',
  target: 'web',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules)/,
      loaders: ['babel']
    }, {
      test: /\.jpe?g$|\.gif$|\.png$|\.ico$/,
      loader: 'url-loader?name=[path][name].[ext]&context=./src'
    }, {
      test: /\.html/,
      loader: 'file?name=[name].[ext]'
    }, {
      test: /\.scss$/,
      loaders: [
        // 'style?singleton',
        // 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
        // 'postcss-loader'
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    },
    {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?mimetype=application/vnd.ms-fontobject'},
    {test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
    {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
    {test: /.svg(\?v=\d+\.\d+\.\d+)?$|.svg$/, loader: 'url?name=[path][name].[ext]&context=./src&mimetype=image/svg+xml'}
    ]
  },
  plugins: [
    // Output our index.html and inject the script tag
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: 'body'
    }),
    // Without this, Webpack would output styles inside JS - we prefer a separate CSS file
    new ExtractTextPlugin('styles.css'),

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  postcss: () => {
    return [ autoprefixer({ browsers: ['last 2 versions'] }), precss];
  }
};

if (DEV) {

  config.entry.push('webpack-hot-middleware/client');

  config.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  );
} else {
  // Minify JS for production
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true,
        unused: true,
        dead_code: true
      }
    }),
    new ExtractTextPlugin('[name].css', { allChunks: true })
  );
}

module.exports = config;

Answer 1

抱歉，这是不可能的，因为从PostCSS插件中获取所有webpack加载器并将它们应用于内容是非常棘手的。

使用不同的方式来设置依赖项。我强烈建议你使用组件方式（它是BEM和React的基础）。将您的设计拆分为小型组件（如徽标，页脚）。然后为每个组件创建一个目录，并将组件的SCSS和JS放到每个目录中。然后从JS导入SCSS。

结果，您将通过在其他组件中要求一个组件来声明组件依赖性。组件样式将由组件JS加载。因此，您将无需从SCSS加载SCSS。

如何使用precss postcss导入open-sass.scss？

1 个答案: