如何在.vue文件中将选项传递给SASS加载程序？

Question

我正在尝试配置vue-loader，使其包含@import语句中的node_modules。 的SCSS文件加载程序的配置工作正常看起来像这样：

{ 
    test: /\.(sass|scss)$/, 
    use: [ 
    'style-loader', 
    'css-loader', 
    { 
     loader: 'sass-loader', 
     options: { 
     includePaths: [path.resolve(__dirname, 'node_modules')], 
     }, 
    }, 
    ], 
}, 

所以现在我想进去.vue文件，这方面的工作。 我认为是这样的：

{ 
    test: /\.vue$/, 
    loader: 'vue-loader', 
    options: { 
    loaders: { 
     // ?{"includePaths":["C:/Users/samuel/Code/school/tinf/sem03/proj01/node_modules"]} 
     sass: 'vue-style-loader!css-loader!sass-loader?' + 
     `includePaths[]=${path.resolve(__dirname, 'node_modules').replace(/\\/g, '/')}`, 
    }, 
    }, 
}, 

我得到一个错误信息：

在./~/css-loader!./~/vue-loader/lib/style-rewriter ERROR ？！.js文件ID =数据-v-1ec85c08 ./〜/上海社会科学院装载机的includepaths [] = C：？！/用户/萨穆埃尔/代码/学校/ TINF/sem03/proj01/node_modules ./〜/ VUE装载机/ LIB/selector.js？类型=风格&指数= 0！./ SRC /组件/ PageHeader.vue

我试着删除vue-style-loader和css-loader从堆栈，我仍然收到错误。

但是，当我直接传递的选项进入风格的标签，它工作正常：

<style lang="sass?{"includePaths":["C:/Users/samuel/Code/school/tinf/sem03/proj01/node_modules"]}"> 

如何做我必须修改装载机，使其工作？

Answer 1

哎呀。

给定的代码工作正常。

我得到了错误File to import not found or unreadable: @material/typography，因为该文件不存在。我应该输入@material/typography/mdc-typography。

这是一个愚蠢的问题，我很抱歉。

无论如何，这是我固定的WebPack配置：

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

const nodeModules = path.resolve(__dirname, 'node_modules'); 

module.exports = { 
    devtool: 'source-map', 
    entry: path.resolve(__dirname, './src/index.js'), 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     }, 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
      // IMPORTANT for scss (lang="sass") in .vue files 
      sass: 'style-loader!css-loader!sass-loader?' + 
       `includePaths[]=${nodeModules}`, 
      }, 
     }, 
     }, 
     { 
     test: /\.(sass|scss)$/, 
     use: [ 
      'style-loader', 
      'css-loader', 
      // IMPORTANT for scss files 
      { loader: 'sass-loader', options: { includePaths: [nodeModules] } }, 
     ], 
     }, 
     { 
     test: /\.css$/, 
     use: ['style-loader', 'css-loader'], 
     }, 
    ], 
    }, 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist'), 
    }, 
    resolve: { 
    extensions: ['.js', '.vue'], 
    alias: { 
     vue: 'vue/dist/vue.js', 
    }, 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new HtmlWebpackPlugin({ 
     filename: 'index.html', 
     template: 'src/index.html', 
    }), 
    ], 
}; 

Answer 2

你可以把它作为includePaths这是一个sass option类似以下内容：

module.exports = { 
    ... 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loaders: ["sass-loader"] 
     } 
    ] 
    }, 
    sassLoader: { 
    includePaths: [path.resolve(__dirname, "./node_modules")] 
    } 
}; 

Answer 3

{ 
    test: /\.vue$/, 
    loader: 'vue-loader', 
    options: { 
    loaders: { 
     scss: [ 
     { 
      loader: 'sass-loader', options: { 
       // here 
      } 
     ] 
    } 
    } 
} 

https://vue-loader.vuejs.org/en/options.html#loaders