如何使用 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 中的第 3 方模块中定义的 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.

问题

如何在 sass 处理器配置中包含文件夹 node_modules/@material？

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

您是否安装了各个组件？

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

Answer 2

要告诉 webpack/sasss-loader @import 路径应该解析为 node_module 而不是本地文件，您必须在前面加上波浪号：

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

所以这与vue-loader无关，而是一个普遍的sass-loader-pitfall.

编辑：如本 css 库的文档所述：

NOTE: The components' Sass files expect that the node_modules directory containing the @material scope folder is present on the Sass include path.

所以我们必须为 sass-.loader/node-sass 添加 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')
}

如何使用 Vuejs+Webpack 包含外部 sass 目录？

How to include external sass directory with Vuejs+Webpack?

webpack

vue.js

webpack-2

material-components