在Vue中导入外部sass

Question

我将bulma导入Vue（通过vue init webpack-simple安装），我似乎无法弄清楚如何让它加载我自己的外部sass文件。

我设置如下：

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

标签拉动bulma工作得很好，但是我在查找初始变量文件时遇到错误：

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目录作为文件。

我在这里缺少什么？

Answer 1

您似乎错过了.sass.代码中的<style>扩展程序。 Webpack可能会从字面上理解相对导入。

我希望保持单个文件组件清洁的一件事就是拥有一个<style>标记，然后是@import我的SASS文件：

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

要记住的另一件事是，您也可以在JavaScript中import CSS / SASS文件。这对全球样式表来说非常方便：

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

Answer 2

您可以在webpack.config中执行以下操作：

loader: 'vue-loader',
options: {
    extractCSS: true,
    loaders: {
        sass: ExtractTextPlugin.extract({
            use: 'css-loader!postcss-loader!sass-loader?indentedSyntax&data=@import "./sass/initial-variables.sass"', 
            fallback: 'vue-style-loader'
        })
    }
}