溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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);
};
總結
以上所述是小編給大家介紹的vue項目中常見問題及解決方案,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
