webpack專案中自動引入全域scss變數檔案
假設我們有一個公共的scss變數檔案variables.scss
/*存放所有全域變數*/ $card-title:#C7D200; //首頁 卡片標題顏色 $bc-color:#182037; $hoverColor: #7abef9; //鏈接hover顏色 $fontColor: #E6EFFF; //字體顏色-白色
webpack要識別scss，需要先安裝sass的loader
npm install --save-dev sass-loader //sass-loader依賴于node-sass npm install --save-dev node-sass
在頁面中需要用到這些自定義變數的時候，每次都需要顯示引入：
@import '@/assets/scss/variables.scss';
這樣操作起來非常麻煩，我們可以通過sass-resources-loader來自動引入，
sass-resources-loader可以訪問sass資源任何一個需要訪問的sass模塊，所以，可以使用共享變數和混合所有SASS樣式，而不去每個檔案都參考，安裝：
npm install --save-dev sass-resources-loader
然后在 build 檔案夾下找到 util.js 修改sass編譯器loader的配置，直接把下面的代碼復制進去即可：
// 全域檔案引入 當然只想編譯一個檔案的話可以省去這個函式 function resolveResource(name) { return path.resolve(__dirname, '../src/assets/scss/' + name); } function generateSassResourceLoader() { var loaders = [ cssLoader, 'sass-loader', { loader: 'sass-resources-loader', options: { // 多個檔案時用陣列的形式傳入，單個檔案時可以直接使用 path.resolve(__dirname, '../src/assets/scss/variables.scss' resources: [resolveResource('variables.scss')] //variables } } ]; if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }); } else { return ['vue-style-loader'].concat(loaders); } }
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), // vue-cli默認sass配置 // sass: generateLoaders('sass', { indentedSyntax: true }), // scss: generateLoaders('sass'), // 新引入的sass-resources-loader sass: generateSassResourceLoader(), scss: generateSassResourceLoader(), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') };
......
vue-cli3 一直運行 /sockjs-node/info?t= 解決方案
D:\WorkSpace\ui-admin\node_modules\sockjs-client\dist\sockjs.js，找到代碼1601行，注釋掉代碼self.xhr.send(payload);
try { //self.xhr.send(payload); } catch (e) {
這樣就可以了
解決vue中的NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
在引入vue-router的界面中添加如下代碼：
const originalPush = Router.prototype.push; Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err); };
Node更新后，Vue專案啟動失敗
錯誤提示如下：
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 14.x
更新node后，原來的vue專案的node Sass環境變了，導致專案跑不起來，執行如下命令：
npm rebuild node-sass
如果執行完上面的命令，還無法運行，接著再執行如下命令：
npm update
Failed at the [email protected] postinstall script
執行npm install sass-loader node-sass webpack –D
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/181611.html
標籤：JavaScript