.vueファイル内のスタイルに対してSASSローダーにオプションを渡すにはどうすればよいですか？

Question

私は@importステートメントにnode_modulesを含めるようにvue-loaderを設定しようとしています。このような細かなルックスを働く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を/ sue-loader？includePaths [] = C：/ Users/samuel/Code/school/tinf/sem03/proj01/node_modules！/〜/ vue-loader/libに/ selector.js？タイプ=私はを削除しようとしたスタイル&インデックス= 0！./のsrc /コンポーネント/ PageHeader.vue

0とcss-loaderのスタックから、私はまだエラーが発生します。

しかし、私は直接スタイルタグにオプションを渡すとき、それが正常に動作します：

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

私はそれを動作させるためにローダーを変更する必要がありますどのように？次のようなsass optionあるincludePathsとして

Answer 1

メールで送信。

与えられたコードは正常に動作します。

ファイルが存在しないため、File to import not found or unreadable: @material/typographyというエラーが発生しました。私は@material/typography/mdc-typographyを輸入したはずです。

それは1つのダムの問題だった、私はとても残念です。

はとにかく、ここに私の固定の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

あなたはそれを渡すことができます：

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