0

現在 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構成

'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;
4

1 に答える 1

1

申し訳ありませんが、PostCSS プラグインからすべての webpack ローダーを取得してコンテンツに適用するのは難しいため、不可能です。

依存関係をスタイルする別の方法を使用します。コンポーネント方式を使用することを強くお勧めします (これは BEM と React の基本です)。デザインを小さなコンポーネント (ロゴ、フッターなど) に分割します。次に、コンポーネントごとにディレクトリを作成し、コンポーネントの SCSS と JS を各ディレクトリに配置します。次に、JS から SCSS をインポートします。

その結果、あるコンポーネントを別のコンポーネントに要求することで、コンポーネントの依存関係を宣言します。コンポーネント スタイルは、コンポーネント JS によって読み込まれます。したがって、SCSS から SCSS をロードする必要がなくなります。

于 2016-01-29T12:30:51.443 に答える