在创建工程项目后,由于没有传统的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了