config nextjs config

package.json

@@ -41,7 +41,7 @@
     "@zeit/next-typescript": "^1.1.1",
     "antd": "^3.20.2",
     "classnames": "^2.2.6",
-    "css-loader": "^3.0.0",
+    "css-loader": "^3.4.1",
     "dayjs": "^1.8.15",
     "electron-better-ipc": "^0.3.0",
     "electron-context-menu": "^0.12.1",

renderer/config/withCSS.js

@@ -0,0 +1,43 @@
+const cssLoaderConfig = require('@zeit/next-css/css-loader-config')
+
+module.exports = (nextConfig = {}) => {
+  return Object.assign({}, nextConfig, {
+    webpack(config, options) {
+      if (!options.defaultLoaders) {
+        throw new Error(
+          'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade'
+        )
+      }
+
+      const { dev, isServer } = options
+      const { cssModules, cssLoaderOptions, postcssLoaderOptions } = nextConfig
+
+      options.defaultLoaders.css = cssLoaderConfig(config, {
+        extensions: ['css'],
+        cssModules,
+        cssLoaderOptions,
+        postcssLoaderOptions,
+        dev,
+        isServer
+      })
+
+      config.module.rules.push({
+        test: /\.css$/,
+        use: Object.assign(options.defaultLoaders.css, { cssModules: true }),
+        exclude: /node_modules/
+      })
+
+      config.module.rules.push({
+        test: /\.css$/,
+        use: Object.assign(options.defaultLoaders.css, { cssModules: false }),
+        include: /node_modules/
+      })
+
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options)
+      }
+
+      return config
+    }
+  })
+}

renderer/config/withLess.js

@@ -0,0 +1,85 @@
+const cssLoaderConfig = require('@zeit/next-css/css-loader-config')
+
+module.exports = (nextConfig = {}) => {
+  return Object.assign({}, nextConfig, {
+    webpack(config, options) {
+      if (!options.defaultLoaders) {
+        throw new Error(
+          'This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade'
+        )
+      }
+
+      const { dev, isServer } = options
+      const {
+        cssModules,
+        cssLoaderOptions,
+        postcssLoaderOptions,
+        lessLoaderOptions = {}
+      } = nextConfig
+
+      options.defaultLoaders.less = cssLoaderConfig(config, {
+        extensions: ['less'],
+        cssModules,
+        cssLoaderOptions,
+        postcssLoaderOptions,
+        dev,
+        isServer,
+        loaders: [
+          {
+            loader: 'less-loader',
+            options: lessLoaderOptions
+          }
+        ]
+      })
+
+      // config.module.rules.push({
+      //   test: /\.less$/,
+      //   use: options.defaultLoaders.less
+      // })
+
+      config.module.rules.push({
+        test: /\.less$/,
+        use: cssLoaderConfig(config, {
+          extensions: ['less'],
+          cssModules: true,
+          cssLoaderOptions,
+          postcssLoaderOptions,
+          dev,
+          isServer,
+          loaders: [
+            {
+              loader: 'less-loader',
+              options: lessLoaderOptions
+            }
+          ]
+        }),
+        exclude: /node_modules/
+      })
+
+      config.module.rules.push({
+        test: /\.less$/,
+        use: cssLoaderConfig(config, {
+          extensions: ['less'],
+          cssModules: false,
+          cssLoaderOptions,
+          postcssLoaderOptions,
+          dev,
+          isServer,
+          loaders: [
+            {
+              loader: 'less-loader',
+              options: lessLoaderOptions
+            }
+          ]
+        }),
+        include: /node_modules/
+      })
+
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options)
+      }
+
+      return config
+    }
+  })
+}

renderer/next-env.d.ts

@@ -2,3 +2,4 @@
 /// <reference types="next/types/global" />
 
 declare module '*.png'
+declare module '*.less'

renderer/next.config.js

@@ -1,46 +1,45 @@
-const withLess = require('@zeit/next-less')
+const withLess = require('./config/withLess')
+const withCss = require('./config/withCSS')
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
-module.exports = withLess({
-  lessLoaderOptions: {
-    javascriptEnabled: true
-  },
-  webpack(config) {
-    config.module.rules = [
-      ...config.module.rules,
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader']
-      },
-      {
-        test: /\.ttf$/,
-        use: ['file-loader?outputPath=static']
-      },
-      {
-        test: /\.(gif|png|jpe?g|svg)$/i,
-        use: ['url-loader']
-      }
-    ]
+module.exports = withCss(
+  withLess({
+    lessLoaderOptions: {
+      javascriptEnabled: true
+    },
+    webpack(config) {
+      config.module.rules = [
+        ...config.module.rules,
+        {
+          test: /\.ttf$/,
+          use: ['file-loader?outputPath=static']
+        },
+        {
+          test: /\.(gif|png|jpe?g|svg)$/i,
+          use: ['url-loader']
+        }
+      ]
 
-    config.plugins.push(
-      new MonacoWebpackPlugin({
-        publicPath: '_next',
-        filename: `static/[name].worker.js`
-      })
-    )
+      config.plugins.push(
+        new MonacoWebpackPlugin({
+          publicPath: '_next',
+          filename: `static/[name].worker.js`
+        })
+      )
 
-    return Object.assign(config, {
-      target: 'electron-renderer',
-      devtool: 'cheap-module-source-map',
-      plugins: config.plugins.filter(p => {
-        return p.constructor.name !== 'UglifyJsPlugin'
+      return Object.assign(config, {
+        target: 'electron-renderer',
+        devtool: 'cheap-module-source-map',
+        plugins: config.plugins.filter(p => {
+          return p.constructor.name !== 'UglifyJsPlugin'
+        })
       })
-    })
-  },
-  useFileSystemPublicRoutes: false,
-  exportPathMap() {
-    return {
-      '/main': { page: '/main' }
+    },
+    useFileSystemPublicRoutes: false,
+    exportPathMap() {
+      return {
+        '/main': { page: '/main' }
+      }
     }
-  }
-})
+  })
+)

renderer/pages/_app.tsx

@@ -1,5 +1,5 @@
 import App from 'next/app'
-import 'antd/dist/antd.less'
+import 'antd/dist/antd.css'
 
 export default class IMApp extends App {
   componentDidCatch(error: any, errorInfo: any) {

renderer/pages/main/Editor/LeftPanel/Editor/Hover/index.tsx

@@ -3,8 +3,8 @@ import classnames from 'classnames'
 import React from 'react'
 import store from '../../../store/editorStore'
 import useSubscribe from '../../../../../../hooks/useSubscribe'
-import './index.less'
 import useDrag from '../../../RightPanel/useDrag'
+import './index.less'
 
 interface Hover {
   props: {}

renderer/pages/main/Editor/LeftPanel/index.tsx

@@ -2,12 +2,13 @@ import MonacoEditor from './MonacoEditor'
 import Preview from './Preview'
 import Editor from './Editor'
 import { Button, Input, DatePicker, Tabs } from 'antd'
-
-import './index.less'
+import css from './index.less'
 
 const { TabPane } = Tabs
 
 function LeftPanel() {
+  console.log('css', css)
+
   return (
     <div className='LeftPanel'>
       <Tabs tabBarStyle={{ margin: 0 }} animated={false} defaultActiveKey='0'>

renderer/pages/main/MainHeader/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import SearchInput from './SearchInput'
 import UserAvatar from './UserAvatar'
-import './index.less'
+import $style from './index.less'
 
 export default class MainHeader extends React.Component {
-	render() {
-		return (
-			<div className='MainHeader'>
+  render() {
+    return (
+      <div className={$style.MainHeader}>
         <SearchInput />
         <UserAvatar />
-			</div>
-		)
-	}
+      </div>
+    )
+  }
 }

renderer/pages/main/index.tsx

@@ -3,7 +3,7 @@ import { Layout, Menu, Icon } from 'antd'
 import MainHeader from './MainHeader'
 import Setting from './Setting'
 import Editor from './Editor'
-import './index.less'
+import $style from './index.less'
 import logo from './images/Icon.png'
 
 const { Content, Sider } = Layout
@@ -44,7 +44,7 @@ class LayoutComponent extends React.Component {
           defaultCollapsed={true}
           collapsed={this.state.collapsed}
           onCollapse={this.onCollapse}>
-          <div className='ant-pro-sider-menu-logo' id='logo'>
+          <div className={$style['ant-pro-sider-menu-logo']} id='logo'>
             <img src={logo} alt='logo' />
           </div>
           <Menu
@@ -63,9 +63,9 @@ class LayoutComponent extends React.Component {
           </Menu>
         </Sider>
         <Layout>
-          <div className='mainLayout'>
+          <div className={$style.mainLayout}>
             <MainHeader></MainHeader>
-            <div className='mainContent'>
+            <div className={$style.mainContent}>
               {menuKey === '1' && <Editor />}
               {menuKey === '5' && <Setting />}
             </div>