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

Posted 2023-02-22

【中文标题】如何在 Vuejs+Webpack 中包含外部 sass 目录？

【英文标题】：How to include external sass directory with Vuejs+Webpack?

【发布时间】：2017-11-14 14:21:09

【问题描述】：

这里是初学者 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.

问题

如何在 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

【问题讨论】：

请提供您的vueLoaderConfig

【参考方案1】：

您是否安装了各个组件？

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

【讨论】：

不，我安装了整个包：npm install --save material-components-web

我认为你需要定义根路径。使用绝对路径确保目录正确。检查这个：webpack.github.io/docs/configuration.html#resolve-root

嗨佩德罗，感谢您的回复。我使用的是绝对路径（函数resolve在webpack.base.conf.js中定义。我也明确写了绝对路径但它不起作用。我真的不知道如何解决这个问题。

【参考方案2】：

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

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

所以这与 vue-loader 无关，而是一般的 sass-loader-pitfall。

编辑：如该 css 库的文档中所述：

注意：组件的 Sass 文件期望包含 @material 范围文件夹的 node_modules 目录存在于 Sass 包含路径中。

所以我们必须为 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')

【讨论】：

感谢您的回复。问题在于@material/card/mdc-card 内部还有其他导入，例如import @material/mixins。这些导入没有~，所以这不起作用。

太棒了！感谢您抽出宝贵时间查看此内容。