导入带别名的React组件时出现此错误:
ERROR in ./src/components/EventsFeed/EventsFeedItem/ItemFooter/ItemFooter.js
Module not found: Error: Cannot resolve module '~components/LikeButton' in /Applications/MAMP/htdocs/react-feed/src/components/EventsFeed/EventsFeedItem/ItemFooter
@ ./src/components/EventsFeed/EventsFeedItem/ItemFooter/ItemFooter.js 15:18-51
我的目标是自动解决目录,这样我就不必在每次导入时都处理这样的事情:" ../../../../...& #34 ;.我像这样导入组件LikeButton:
import LikeButton from '~components/LikeButton';
当我在style.scss文件中导入SASS时,它会起作用:
@import '~/stylesheets/utilities/settings';
这是我的webpack.config.js文件的外观:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const sassLoader = 'css!sass!postcss?indentedSyntax=scss&includePaths[]=' + path.resolve(__dirname, './src');
module.exports = {
devtool: 'inline-source-map',
entry: [
'./src'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js', // this exports the final .js file
publicPath: '/public'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015,plugins[]=lodash']
},
{
test: /\.scss$/, loader: ExtractTextPlugin.extract('style', sassLoader)
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin("./bundle.css")
],
postcss: [
autoprefixer({
browsers: ['last 2 versions']
})
],
resolve: {
modulesDirectories: ['node_modules', 'src'],
extensions: ['', '.js', '.scss'],
root: [path.join(__dirname, './src')],
alias: {
stylesheets: path.join(__dirname, './src/stylesheets'),
components: path.join(__dirname, './src/components')
}
}
};