create-react-app less-css-modulesの追加

1899 ワード

  • create-react-app demo
  • npm run eject
  • npm i less less-loader --save
  • npm i less-watch-compiler --save-dev
  • package.jsonに
       "scripts":{ 
          "build-css": "less-watch-compiler --run-once --main-file=index.less src/less src/css",
           "watch-css": "npm run build-css && less-watch-compiler --main-file=index.less src/less src/css"
        }    
    
  • を追加
  • npm run watch-css
  • を実行
  • configのwebpack.config.jsにおける構成
       //    
       {
         loader: require.resolve('css-loader'),
         options: cssOptions
       },
       //    
       {
         loader: require.resolve('css-loader'),
         options: {
           importLoaders: 1,
           modules: true,
           localIdentName: "[name]__[local]___[hash:base64:5]"     //   css modules     
         },
       },
       //   webpack   less   ,   sass     
        const lessRegex = /\.less$/
        const lessModuleRegex = /\.module\.less$/ 
        oneOf:[
               ...,
               {
                 test: lessRegex,
                 use: getStyleLoaders(
                   {
                     importLoaders: 2,
                     sourceMap: isEnvProduction
                       ? shouldUseSourceMap
                       : isEnvDevelopment,
                   },
                   'less-loader'
                 )
               },
               {
                 test: lessModuleRegex,
                 use: getStyleLoaders(
                   {
                     importLoaders: 2,
                     sourceMap: isEnvProduction
                       ? shouldUseSourceMap
                       : isEnvDevelopment,
                     modules: true,
                     getLocalIdent: getCSSModuleLocalIdent
                   },
                   'less-loader'
                 ),
                 sideEffects: true
               },
           ]
    
    
  • 8.既存の依存を削除再インストール依存を削除し、npm startを実行すればよい