2

我在尝试使用工具箱设置 webpack 时遇到了一些问题。出于某种原因，我不知道为什么它不起作用。

我的 webpack 文件如下所示：

const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  context: __dirname,
  devtool: 'inline-source-map',
  entry: {
    factigisVE: './static/js/bundles/factigisVE.js',
    vendor: [
      'webpack-hot-middleware/client'
    ]
  },
  output: {
    path: path.join(path.join(__dirname, 'dist'), 'js'),
    filename: '[name].js',
    libraryTarget: "amd",
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.scss', '.css', '.js', '.json','.webpack.js', '.web.js', '.js', '.jsx'],
    modulesDirectories: [
      'node_modules',
      path.resolve(__dirname, './node_modules')
    ]
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: { presets: ['es2015', 'stage-0', 'react','stage-2'] }
      }, {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
      }
    ]
  },
  externals: [
      function(context, request, callback) {
          if (/^dojo/.test(request) ||
              /^dojox/.test(request) ||
              /^dijit/.test(request) ||
              /^esri/.test(request)
          ) {
              return callback(null, "amd " + request);
          }
          callback();
      }
  ],
  devServer: {
    inline: true,
    port: 443,
    host: "127.0.0.1",
    historyApiFallback: true
  },
  devtool: 'source-map',
  postcss: [autoprefixer],
  sassLoader: {
    data: '@import "css/index.scss";',
    includePaths: [path.resolve(__dirname, './static')]
  },
  plugins: [
    new ExtractTextPlugin('../css/style.css', { allChunks: true }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

然后我的 index.scss 看起来像：

@import "~react-toolbox/lib/colors";



$color-primary: $palette-blue-500;
$color-primary-dark: $palette-blue-700;

我遇到的错误是：

Error: File to import not found or unreadable: ~react-toolbox/lib/colors
parent style sheet: I:/proyect/ve/static/css/index.scss on line 1 of static/css/index.scss  

> @import "~react-toolbox/lib/colors";

我的目录也看起来像：我的目录 任何关于正在发生的事情的帮助都将非常感激。谢谢 ！

4

1 回答 1

0

我能够通过~从导入开始删除 来解决此问题。

@import "react-toolbox/lib/colors";

该postcss-import插件似乎具有相同的行为。

于 2017-05-01T08:42:45.700 回答