在Vue中導入外部文件

我正在將Bulma導入到Vue中（通過vue init webpack-simple安裝），我似乎無法弄清楚如何讓它加載我自己的外部sass文件。在Vue中導入外部文件

我有它設置如下：

<style lang="sass" src="./sass/initial-variables"></style> 
<style lang="sass" src="bulma"></style>

標籤的作品就好拉布爾瑪，但我得到找我的初始變量的錯誤文件：

ERROR in ./src/App.vue 
Module not found: Error: Can't resolve './sass/initial-variables' in 
'/Users/johnbriggs/Sites/mimismarket/src'

在我src文件夾，我有一個帶有initial-variables.sass的sass目錄作爲文件。

缺少什麼我在這裏？

來源

2017-09-25 brunam

看起來您在<style>標記中缺少.sass.擴展名。 Webpack可能會從字面上進行相對導入。

有一件事我喜歡做的，讓我的單文件元件清潔有一個<style>標籤，然後@import我SASS文件：

<style lang="sass"> 
@import 'bulma' 
@import './sass/initial-variables' // we don't need the extension here 
</style>

另一件事要記住的是，你可以import CSS/SASS文件也在您的JavaScript中。這是非常方便的對全球的樣式表：

// main.js 
import 'bootstrap/dist/css/bootstrap.min.css'

來源

2017-09-26 00:43:27 Franey

你可以在你的webpack.config如下：

loader: 'vue-loader', 
options: { 
    extractCSS: true, 
    loaders: { 
     sass: ExtractTextPlugin.extract({ 
      use: 'css-loader!postcss-loader!sass-loader?indentedSyntax&[email protected] "./sass/initial-variables.sass"', 
      fallback: 'vue-style-loader' 
     }) 
    } 
}

來源

2017-09-26 09:51:06 Phil

在Vue中導入外部文件

回答

相關問題