create-react-app 腳手架不支援less解決方案
阿新 • • 發佈:2019-01-02
1. 在node_modules下找到react-scripts資料夾
cd node_modules/react-scripts
2. 安裝less、less-loader依賴包
a. yarn安裝
yarn add less less-loader
b. npm安裝
npm install --save less less-loader
3. 在react-scripts/config資料夾找到webpack.config.dev.js和webpack.config.prod.js兩個檔案
{ test: /\.(css|less)$/, loader: ExtractTextPlugin.extract( Object.assign( { fallback: require.resolve('style-loader'), use: [ { loader: require.resolve('css-loader'), options: { importLoaders: 1, minimize: true, sourceMap: shouldUseSourceMap, }, }, { 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', }), ], }, }, { loader: require.resolve('less-loader'), }, ], }, extractTextPluginOptions ) )