create-react-app不支持less的解决方式
发布时间：2020-12-15 20:22:42 所属栏目：百科 来源：网络整理
导读：进入node_modulesreact-scriptsconfig目录 修改webpack.config.dev.js跟webpack.config.prod.js中关于loader的配置即可，注意loader是倒序执行的，less-loader需要先执行，所以写在规则的最后一个 ? ? ?webpack.config.dev.js修改后的配置如下 { ?????????
|
进入node_modulesreact-scriptsconfig目录 修改webpack.config.dev.js跟webpack.config.prod.js中关于loader的配置即可，注意loader是倒序执行的，less-loader需要先执行，所以写在规则的最后一个 ? ? ?webpack.config.dev.js修改后的配置如下
{
??????????? test: /.(css|less)$/,
??????????? use: [
????????????? require.resolve(‘style-loader‘),
{
loader: require.resolve(‘css-loader‘),
??????????????? options: {
????????????????? importLoaders: 1,
??????????????? },
????????????? },
????????????? {
??????????????? loader: require.resolve(‘postcss-loader‘),
??????????????? options: {
????????????????? // Necessary for external CSS imports to work
????????????????? // https://github.com/facebookincubator/create-react-app/issues/2677
????????????????? ident: ‘postcss‘,
????????????????? plugins: () => [
??????????????????? require(‘postcss-flexbugs-fixes‘),
??????????????????? autoprefixer({
????????????????????? browsers: [
??????????????????????? ‘>1%‘,
??????????????????????? ‘last 4 versions‘,
??????????????????????? ‘Firefox ESR‘,
??????????????????????? ‘not ie < 9‘,// React doesn‘t support IE8 anyway
????????????????????? ],
????????????????????? flexbox: ‘no-2009‘,
??????????????????? }),
????????????????? ],
??????????????? },
????????????? require.resolve(‘less-loader‘)
??????????? ],
????????? }
? ? webpack.config.prod.js修改后的配置如下 ? |