上篇知道了如何自定义配置webpack,接下来就让我们用简单一些的方法来实现使用stylus等功能。
安装stylus依赖:1
yarn add stylus stylus-loader
在webpack配置依赖,如果要手动配置webpack的话,React必须先把配置Eject出来:1
yarn run eject
react-cli会询问你是否执行操作,并提示你这个操作是不可逆的。
输入y继续
这个时候如果eject的该项目是在本地的一个git仓库里的,而且这个仓库里还有文件未上传到远程。那么恭喜你,你eject会失败,它会告诉你必须要把本地这个仓库里的文件未更改的状态下才能把webpack配置eject出来。
成功以后项目根目录下会弹射出一个config文件夹和一个scripts文件夹,同时package.json里的相关配置也会改变
在弹射出来的config文件夹下找到webpack.config.dev.js:1
2
3
4
5
6
7
8
9
10
11找到module.rules.oneOf,里面有一个css的配置项,把styl加进去:
test: /\.(css|styl)$/,
然后在use中加入以下配置代码:
{
loader: require.resolve('stylus-loader'),
options: {
sourceMap: true
}
};
滑到oneOf的最下面,找到exclude,将styl加进去:
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/,/\.styl$/],
然后记住要重新yarn安装一下依赖,最后输入yarn start就能成功启动了(可以直接引入styl文件),这个时候还会出现一个postcss的提示,原来他是一个强大的东西,autoprefixer也只是他其中的一个插件
安装postcss-loader:1
yarn add postcss-loader
最后就会惊喜的发现关于css的浏览器兼容性问题的浏览器前缀会自动帮你加上