在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中导入外部文件

回答

相关问题