如何在Vuejs + Webpack中包含外部sass目錄？

Question

初學者Vuejs問題在這裏。我試圖用Vuejs和Webpack編譯sass文件。繼the instructions我裝：

npm install sass-loader node-sass --save-dev 

，然後，我可以在我的組件使用SASS處理：

<style lang="sass"> 
    /* This works with my local components */ 
</style> 

問題是，當我想用​​在生活中node_modules第三方模塊定義sass文件。特別是我想用Material Components Web。現在，當我要導入一個組件SASS文件：

<style lang="scss" scoped> 
    @import '@material/card/mdc-card'; 
</style> 

以下錯誤發生：

Module build failed: 
    @import '@material/card/mdc-card'; 
    File to import not found or unreadable: @material/card/mdc-card. 

問題

我怎麼能包括文件夾node_modules/@material在SASS處理器配置？

webpack.base.conf.js

var path = require('path') 
var utils = require('./utils') 
var config = require('../config') 
var vueLoaderConfig = require('./vue-loader.conf') 

function resolve(dir) { 
    return path.join(__dirname, '..', dir) 
} 

module.exports = { 
    entry: { 
     app: './src/main.js' 
    }, 
    output: { 
     path: config.build.assetsRoot, 
     filename: '[name].js', 
     publicPath: process.env.NODE_ENV === 'production' 
      ? config.build.assetsPublicPath 
      : config.dev.assetsPublicPath 
    }, 
    resolve: { 
     extensions: ['.js', '.vue', '.json'], 
     alias: { 
      'vue$': 'vue/dist/vue.esm.js', 
      '@': resolve('src') 
     } 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.(js|vue)$/, 
       loader: 'eslint-loader', 
       enforce: 'pre', 
       include: [resolve('src'), resolve('test')], 
       options: { 
        formatter: require('eslint-friendly-formatter') 
       } 
      }, 
      { 
       test: /\.vue$/, 
       loader: 'vue-loader', 
       options: vueLoaderConfig 
      }, 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       include: [resolve('src'), resolve('test')] 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
       loader: 'url-loader', 
       options: { 
        limit: 1000, 
        name: utils.assetsPath('img/[name].[hash:7].[ext]') 
       } 
      }, 
      { 
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
       loader: 'url-loader', 
       options: { 
        limit: 10000, 
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 
       } 
      }, 
      { 
       test: /\.s[a|c]ss$/, 
       loader: 'style!css!sass', 

       /* ADDED THIS LINE, BUT NOT LUCK */ 
       options: { 
        includePaths: [resolve('node_modules')], 
       }, 

       /* THIS DON'T WORK EITHER */ 
       include: [resolve('node_modules')], 

      } 
     ] 
    } 
} 

VUE-loader.conf.js

var utils = require('./utils') 
var config = require('../config') 
var isProduction = process.env.NODE_ENV === 'production' 

module.exports = { 
    loaders: utils.cssLoaders({ 
    sourceMap: isProduction 
     ? config.build.productionSourceMap 
     : config.dev.cssSourceMap, 
    extract: isProduction 
    }) 
} 

utils.js

var path = require('path') 
var config = require('../config') 
var ExtractTextPlugin = require('extract-text-webpack-plugin') 

exports.assetsPath = function (_path) { 
    var assetsSubDirectory = process.env.NODE_ENV === 'production' 
    ? config.build.assetsSubDirectory 
    : config.dev.assetsSubDirectory 
    return path.posix.join(assetsSubDirectory, _path) 
} 

exports.cssLoaders = function (options) { 
    options = options || {} 

    var cssLoader = { 
    loader: 'css-loader', 
    options: { 
     minimize: process.env.NODE_ENV === 'production', 
     sourceMap: options.sourceMap 
    } 
    } 

    // generate loader string to be used with extract text plugin 
    function generateLoaders (loader, loaderOptions) { 
    var loaders = [cssLoader] 
    if (loader) { 
     loaders.push({ 
     loader: loader + '-loader', 
     options: Object.assign({}, loaderOptions, { 
      sourceMap: options.sourceMap 
     }) 
     }) 
    } 

    // Extract CSS when that option is specified 
    // (which is the case during production build) 
    if (options.extract) { 
     return ExtractTextPlugin.extract({ 
     use: loaders, 
     fallback: 'vue-style-loader' 
     }) 
    } else { 
     return ['vue-style-loader'].concat(loaders) 
    } 
    } 

    // https://vue-loader.vuejs.org/en/configurations/extract-css.html 
    return { 
    css: generateLoaders(), 
    postcss: generateLoaders(), 
    less: generateLoaders('less'), 
    sass: generateLoaders('sass', { indentedSyntax: true }), 
    scss: generateLoaders('sass'), 
    stylus: generateLoaders('stylus'), 
    styl: generateLoaders('stylus') 
    } 
} 

// Generate loaders for standalone style files (outside of .vue) 
exports.styleLoaders = function (options) { 
    var output = [] 
    var loaders = exports.cssLoaders(options) 
    for (var extension in loaders) { 
    var loader = loaders[extension] 
    output.push({ 
     test: new RegExp('\\.' + extension + '$'), 
     use: loader 
    }) 
    } 
    return output 
} 

Answer 1

告訴的WebPack/sasss裝載機，一個@import路徑應被解析爲一個node_module，而不是一個本地文件，你必須在前面加上一個波浪線：

@import '~@material/card/mdc-card'; 

所以這無關用vue-loader但是是一般的sass-loader-陷阱。

編輯：如在該文檔中該CSS的lib指出：

注：組件的薩斯文件期望含有@material範圍文件夾中的node_modules目錄存在於薩斯包括路徑。

所以我們要增加對SASS-.loader /節點青菜的inlcudePaths：

return { 
    css: generateLoaders(), 
    postcss: generateLoaders(), 
    less: generateLoaders('less'), 
    sass: generateLoaders('sass', { indentedSyntax: true, includePaths: [path.resolve(__dirname, '../node_modules'] }), 
    scss: generateLoaders('sass' { includePaths: [path.resolve(__dirname, '../node_modules'] }), 
    stylus: generateLoaders('stylus'), 
    styl: generateLoaders('stylus') 
} 

Answer 2

你有沒有安裝各個組件？

npm install --save @material/button @material/card @material/textfield @material/typography