標籤:http anyway clu work react prefix blog str bat
使用create-react-app
建立的項目預設不支援less
,以下增加less
配置的步驟
暴露設定檔
create-react-app
產生的項目文,看不到webpack相關的設定檔,需要先暴露出來,使用如下命令即可:
npm run eject
安裝
less-loader
和
less
npm install less-loader less --save-dev
修改
webpack
配置
修改 webpack.config.dev.js
和 webpack.config-prod.js
設定檔
改動1:
/\.css$/
改為 /\.(css|less)$/,
, 修改後如下:
exclude: [ /\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/,],
改動2:
test: /\.css$/
改為 /\.(css|less)$/
test: /\.css$/
的 use
數組配置增加 less-loader
- 修改後如下:
{ 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‘, }), ], }, }, { loader: require.resolve(‘less-loader‘) // compiles Less to CSS } ],},
create-react-app項目添加less配置