1、vite開發環境和生產環境的環境變量配置

1、環境變量配置
vite本身會直接讀取為什么會讀取，因為含有dotenv第三方庫 ，會直接讀取 .env文件，

2、css模塊化簡單處理

css:{modules:{localsConvention: "camselCaseOnly" // 打包配置為駝峰命名規則。sopeBehaviour:"local" // 配置當前是全局 還是 局部。gengerateScopedName: //[name][local][hash:5] , 配置生成的css樣式名稱，也可以配置成函數。 一般不動hashPrefix:"hellow" // 配置hash生成規則 主要和 name 聯用。globalModulePaths:[] // 配置不參與 模塊化的文件路徑}, //是對css模塊化默認行為進行覆蓋},preprocessorOptions:{less:{math:"always", // 配置lessc的編譯內容，遇到乘除法自動進行globalVars:{ // 注入全局變量css  @mainColor就可以直接使用mainColor:"red"}},sass:{}devSourcemap:true,// 開啟css索引文件，可以在報錯的時候直接定位 直接定位到源代碼}
}

1、為了防止樣式被覆蓋，新建的css文件可以如下，通過加上module來改變css最終生成規則，會在類名的后面生成一個has值。

a.module.css

3、postcss的理解

1、保證css在執行運行起來萬無一失，，去將語法糖進行編譯（嵌套語法，函數，變量）變成原生的css，在次對未來的高級語法css進行降級，前綴補全，輸送到瀏覽器。（postcss包含了less）

npm install postcss -D

3.1、解釋一下 npm install XXX 加上-s、-d、-g和什么都不加的區別。
1.npm install XXX -s

npm install XXX -s 相當于 npm install -S 相當于 npm install --save
這樣安裝是局部安裝的，會寫進package.json文件中的dependencie里。
dependencies： 表示生產環境下的依賴管理；
說白了你安裝一個庫如果是用來構建你的項目的，比如echarts、element-ui，是實際在項目中起作用，就可以使用 -s 來安裝。

2.npm install XXX -d

npm install XXX -d 相當于 npm install -D 相當于 npm install --save-dev
這樣安裝是局部安裝的，會寫進package.json文件中的devDependencies 里。
devDependencies ：表示開發環境下的依賴管理；
如果你安裝的庫是用來打包的、解析代碼的，比如webpack、babel，就可以用 -d 來安裝，項目上線了，這些庫就沒用了，不然留這些庫給用戶自己來打包和解析代碼嘛。

3.npm install XXX -g

npm install XXX -g 表示全局安裝，安裝一次過后，你就可以在其他直接用啦。

4.npm install XXX

npm install XXX 什么都不加的時候
npm 5開始通過npm install 什么都不加 和 npm install --save一樣，都是局部安裝并會把模塊自動寫入package.json中的dependencies里。

3.2 postcss內置屬性

1、Autoprefixer瀏覽器補全機制，比如我們使用了box-sizing：border-box；

box-sizing:border-box;
//瀏覽器自動補全 自動生成以下代碼
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;

2、postcss-preset-env：未來語法機制，可以書寫最新瀏覽器語法內容。

const postcssPresetEnv = require('postcss-preset-env');const yourConfig = {plugins: [/* other plugins *//* remove autoprefixer if you had it here, it's part of postcss-preset-env */postcssPresetEnv({/* pluginOptions */features: {'nesting-rules': {noIsPseudoSelector: false,},},})]
}
比如我們可以使用這些語法
@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;:root {--mainColor: #12345678;
}body {color: var(--mainColor);font-family: system-ui;overflow-wrap: break-word;
}:--heading {background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);@media (--viewport-medium) {margin-block: 0;}
}a {color: rgb(0 0 100% / 90%);&:hover {color: rebeccapurple;}
}/* becomes */:root {--mainColor: rgba(18, 52, 86, 0.47059);
}body {color: rgba(18, 52, 86, 0.47059);color: var(--mainColor);font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;word-wrap: break-word;
} 

3、定義css規范我們可以使用styleLint用于規范css原則，使用方法如下：
以viteVue為例

安裝相關依賴
npm install postcss stylelint stylelint-config-standard --save-dev
//簡潔版
// 引入 postcss 相關配置
import postcss from 'postcss';
import stylelint from 'stylelint';
import stylelintPlugin from 'stylelint-webpack-plugin';
export default defineConfig({// 其他配置...css: {postcss: {plugins: [stylelintPlugin],},},
});
然后定一個 .stylelintrc.json配置文件和vite.config.json同級
// 
module.exports = {extends: ['stylelint-config-standard', // 配置stylelint拓展插件'stylelint-config-html/vue', // 配置 vue 中 template 樣式格式化'stylelint-config-standard-scss', // 配置stylelint scss插件'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 樣式格式化'stylelint-config-recess-order', // 配置stylelint css屬性書寫順序插件,'stylelint-config-prettier', // 配置stylelint和prettier兼容],overrides: [{files: ['**/*.(scss|css|vue|html)'],customSyntax: 'postcss-scss',},{files: ['**/*.(html|vue)'],customSyntax: 'postcss-html',},],ignoreFiles: ['**/*.js','**/*.jsx','**/*.tsx','**/*.ts','**/*.json','**/*.md','**/*.yaml',],/*** null  => 關閉該規則* always => 必須*/rules: {'value-keyword-case': null, // 在 css 中使用 v-bind，不報錯'no-descending-specificity': null, // 禁止在具有較高優先級的選擇器后出現被其覆蓋的較低優先級的選擇器'function-url-quotes': 'always', // 要求或禁止 URL 的引號 "always(必須加上引號)"|"never(沒有引號)"'no-empty-source': null, // 關閉禁止空源碼'selector-class-pattern': null, // 關閉強制選擇器類名的格式'property-no-unknown': null, // 禁止未知的屬性(true 為不允許)'block-opening-brace-space-before': 'always', //大括號之前必須有一個空格或不能有空白符'value-no-vendor-prefix': null, // 關閉 屬性值前綴 --webkit-box'property-no-vendor-prefix': null, // 關閉 屬性前綴 -webkit-mask'selector-pseudo-class-no-unknown': [// 不允許未知的選擇器true,{ignorePseudoClasses: ['global', 'v-deep', 'deep'], // 忽略屬性，修改element默認樣式的時候能使用到},],},
}