diff --git a/docs/.vuepress/override.styl b/docs/.vuepress/override.styl
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md
index 1703e3cd06..6781942910 100644
--- a/docs/default-theme-config/README.md
+++ b/docs/default-theme-config/README.md
@@ -419,6 +419,39 @@ $borderColor = #eaecef
 $codeBgColor = #282c34
 ```
 
+### Existing issues <Badge text="< 0.12.0" type='error'/>
+
+In order to override the default variables mentioned above, `override.styl` will be imported at the end of the `config.styl` in default theme, and this file will be used by multiple files, so once you wrote styles here, your style will be duplicated by multiple times. See [#637](https://github.com/vuejs/vuepress/issues/637).
+
+In fact, `style constants override` and `styles override` are two things, the former should be executed before any CSS is compiled, while the latter should be generated at the end of the CSS bundle, which has the highest priority. 
+
+### Migrate your styles to `style.styl` <Badge text="0.12.0+"/>
+
+Start from `0.12.0`, we split `override.styl` into two APIs: `override.styl` and `style.styl`:
+
+If you wrote styles at `override.styl` in the past, e.g.
+
+``` stylus
+// override.styl
+$textColor = red // style constants override
+
+#my-style {} // styles override or custom styles.
+```
+
+You'll need to separate the style part to `style.styl`:
+
+``` stylus
+// override.styl
+// SHOULD ONLY focus on style constants override.
+$textColor = red
+```
+
+``` stylus
+// style.styl
+// SHOULD focus on styles override or your custom styles.
+#my-style {}
+```
+
 ## Custom Page Class
 
 Sometimes, you may need to add a unique class for a specific page so that you can target content on that page only in custom CSS. You can add a class to the theme container div with `pageClass` in `YAML front matter`:
diff --git a/lib/app/app.js b/lib/app/app.js
index c5e39c30a4..3bff5421a0 100644
--- a/lib/app/app.js
+++ b/lib/app/app.js
@@ -8,7 +8,7 @@ import enhanceApp from '@temp/enhanceApp'
 import themeEnhanceApp from '@temp/themeEnhanceApp'
 
 // generated from user config
-import('@temp/override.styl')
+import('@temp/style.styl')
 
 // built-in components
 import Content from './components/Content'
diff --git a/lib/default-theme/styles/config.styl b/lib/default-theme/styles/config.styl
index 369302a205..4279244f19 100644
--- a/lib/default-theme/styles/config.styl
+++ b/lib/default-theme/styles/config.styl
@@ -17,3 +17,5 @@ $MQMobileNarrow = 419px
 
 // code
 $lineNumbersWrapperWidth = 3.5rem
+
+@import '~@temp/override.styl'
diff --git a/lib/prepare/index.js b/lib/prepare/index.js
index b2a0a0b45f..70a90a45bd 100644
--- a/lib/prepare/index.js
+++ b/lib/prepare/index.js
@@ -3,6 +3,8 @@ const fs = require('fs-extra')
 const resolveOptions = require('./resolveOptions')
 const { genRoutesFile, genComponentRegistrationFile } = require('./codegen')
 const { writeTemp, writeEnhanceTemp } = require('./util')
+const logger = require('../util/logger')
+const chalk = require('chalk')
 
 module.exports = async function prepare (sourceDir) {
   // 1. load options
@@ -24,7 +26,19 @@ module.exports = async function prepare (sourceDir) {
   // 4. handle user override
   const overridePath = path.resolve(sourceDir, '.vuepress/override.styl')
   const hasUserOverride = fs.existsSync(overridePath)
-  await writeTemp(`override.styl`, hasUserOverride ? `@import(${JSON.stringify(overridePath)})` : ``)
+  await writeTemp('override.styl', hasUserOverride ? `@import(${JSON.stringify(overridePath)})` : ``)
+
+  const stylePath = path.resolve(sourceDir, '.vuepress/style.styl')
+  const hasUserStyle = fs.existsSync(stylePath)
+  await writeTemp('style.styl', hasUserStyle ? `@import(${JSON.stringify(stylePath)})` : ``)
+
+  // Temporary tip, will be removed at next release.
+  if (hasUserOverride && !hasUserStyle) {
+    logger.tip(
+      `${chalk.magenta('override.styl')} has been split into 2 APIs, we recommend you upgrade to continue.\n` +
+      `      See: ${chalk.magenta('https://vuepress.vuejs.org/default-theme-config/#simple-css-override')}`
+    )
+  }
 
   // 5. handle enhanceApp.js
   const enhanceAppPath = path.resolve(sourceDir, '.vuepress/enhanceApp.js')