react v16 create-react-app+sass

在创建工程项目后,由于没有传统的webpack.config文件首先安装eject生成自定义配置文件(注意,用eject生成webpack.config后该操作不能回滚,注意备份)

npm i eject
npm run eject

之后会发现项目根目录下多了很多文件,比如/config,/scripts文件夹

我们先安装编译sass的loader

npm install sass-loader node-sass --save-dev

安装完毕后,打开 /config/webpack.config.dev.js,在loader添加如下代码

{
	test: /\.scss$/,
	loader: [
		require.resolve('style-loader'),
		require.resolve('css-loader'),
		require.resolve('sass-loader')
	]
},

并找到 file-loader,进行修改,在exclude中添加scss文件

{
	// Exclude `js` files to keep "css" loader working as it injects
	// its runtime that would otherwise processed through "file" loader.
	// Also exclude `html` and `json` extensions so they get processed
	// by webpacks internal loaders.
	exclude: [ /\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.scss$/ ],
	loader: require.resolve('file-loader'),
	options: {
		name: 'static/media/[name].[hash:8].[ext]'
		}
}

至此,你的程序应该可以直接import scss了