如果Webpack偶然发现»@import'。/ dir / file'«，我需要什么样的加载器？

Question

Webpack需要为每个文件扩展名提供特定的加载器。在网站基础6的节点模块中，网站存在一系列有问题的代码，这使得Webpack陷入混乱：

@import './scss/foundation';

这会导致我的错误：

  错误在./~/foundation-sites/assets/foundation.scss模块解析   失败：   /node_modules/foundation-sites/assets/foundation.scss   第1行：意外的令牌ILLEGAL您可能需要一个适当的加载器   处理此文件类型。 | @import'./scss/foundation';

这是一个错误或功能吗？我需要特殊配置或特定装载程序吗？

webpack.conf.js

/*
 * Helper: root(), and rootDir() are defined at the bottom
 */
const autoprefixer = require('autoprefixer')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')
/*
 * Webpack Plugins
 */
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var ProvidePlugin = webpack.ProvidePlugin;
/*
 * SASS Config
 */
const sassLoaders = [
  'css-loader',
  'postcss-loader',
  'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, './assets/scss')
]
/*
 * Config
 */
const config = {
  devtool: 'source-map',
  debug: true,

  entry: {
    'angular2': [
      'rxjs',
      'reflect-metadata',
      'angular2/core',
      'angular2/router',
      'angular2/http'
    ],
    'app': [
      './app/boot'
    ],
    'head': [
      './app/head'
    ]
  },

  output: {
    path: root('build'),
    publicPath: 'build/',
    filename: '[name].js',
    sourceMapFilename: '[name].js.map',
    chunkFilename: '[id].chunk.js'
  },

  resolve: {
    extensions: ['','.ts','.js','.json', '.scss', '.css', '.styl', '.html'],
    modulesDirectories: ['app', 'assets', 'node_modules']
  },

  module: {
    preLoaders: [
      {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: 'json'},
    ],
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts',
        exclude: [ /node_modules/ ]},
      {
        test: /\.js$/,
        loaders: ['babel-loader'],
        exclude: [ /node_modules/ ]},
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')),
        exclude: [ /node_modules/ ]},
      {
        test: /\.styl$/,
        loaders: ['css', 'stylus'],
        exclude: [ /node_modules/ ]
      },
      {
        test: /\.json$/,
        loader: 'json' }
    ]
  },

  plugins: [
    new CommonsChunkPlugin({ name: 'angular2', filename: 'angular2.js', minChunks: Infinity }),
    new CommonsChunkPlugin({ name: 'common',   filename: 'common.js' }),
    new ExtractTextPlugin('[name].css')
  ],
  postcss: [
    autoprefixer({
      browsers: ['last 2 versions']
    })
  ],

  target: 'node-webkit'
};

/*
 * Helper functions
 */
function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

function rootNode(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return root.apply(path, ['node_modules'].concat(args));
}

/*
 * Export module
 */
module.exports = config

Answer 1

问题可以轻松解决。只需将node_modules添加到webpack.conf.js。

中已解析的模块即可

  ...

  module: {
    preLoaders: [...],
    loaders: [...],
    resolve: {
      modulesDirectories: ['node_modules']
    }
  },

  ...