浏览代码

doc:修改VueCLI3按需加载文档说明

richard1015 6 年之前
父节点
当前提交
d846169de2
共有 2 个文件被更改,包括 47 次插入3 次删除
  1. 24 2
      docs/start.md
  2. 23 1
      docs/theme.md

+ 24 - 2
docs/start.md

@@ -153,7 +153,7 @@ npm i @nutui/babel-plugin-separate-import -D
 
 然后配置一下babel的配置文件
 
-```bash
+``` bash
 {
   "plugins": [
     ["@nutui/babel-plugin-separate-import", {
@@ -175,7 +175,7 @@ Picker.install(Vue);
 ```
 如果需要按需加载 scss 文件(如需要自定义主题)时,除了需要把 style 选项值设为为 **scss** 外,还需要修改 webpack 配置文件的 sass-loader 配置,如下所示:
 
-```
+``` bash
 {
     loader: 'sass-loader',
     options: {
@@ -184,6 +184,28 @@ Picker.install(Vue);
 }
 ```
 
+`vue.config.js` VueCLI3 配置方式 
+
+``` bash
+module.exports = {
+    css: {
+        loaderOptions: {
+            // 给 sass-loader 传递选项
+            scss: {
+                // @/ 是 src/ 的别名
+                // 注意:在 sass-loader v7 中,这个选项名是 "data"
+                prependData: ` 
+                @import "@/assets/custom_theme.scss";
+                @import "@nutui/nutui/dist/styles/index.scss";
+                `,
+            }
+        },
+    }
+}
+```
+
+> VueCLI 3 相关Demo 请查看 [NutUI Demo](https://github.com/richard1015/nutui-demo)
+
 ### 2. 手动引入
 
 ```javascript

+ 23 - 1
docs/theme.md

@@ -49,6 +49,26 @@ $dark-color: #DADADA;
 }
 ```
 
+如果你的项目使用的是VueCLI 3以上版本 请修改 `vue.config.js` 进行配置
+
+``` bash
+module.exports = {
+    css: {
+        loaderOptions: {
+            // 给 sass-loader 传递选项
+            scss: {
+                // @/ 是 src/ 的别名
+                // 注意:在 sass-loader v7 中,这个选项名是 "data"
+                prependData: ` 
+                @import "@/assets/custom_theme.scss";
+                @import "@nutui/nutui/dist/styles/index.scss";
+                `,
+            }
+        },
+    }
+}
+```
+
 ### 第三步:引用组件样式时引用 SCSS 文件
 
 在主题定制场景下,项目中引用组件时,需要引入 **SCSS** 文件,而不是 **CSS** 文件。分三种情况:
@@ -79,4 +99,6 @@ import '@nutui/nutui/dist/packages/button/button.scss';
     }]
   ]
 }
-```
+```
+
+> VueCLI 3 相关Demo 请查看 [NutUI Demo](https://github.com/richard1015/nutui-demo)