如何使用webpack和Vue.js正确地@import外部SCSS？

如材料组件Web的榜样，我希望能够从我的node_modules导入SCSS是这样的：如何使用webpack和Vue.js正确地@import外部SCSS？

@import '@material/elevation/mdc-elevation';

但是，我越来越想运行的WebPack构建时，此错误消息：

File to import not found or unreadable: @material/elevation/mdc-elevation.

@import './~/@material/elevation/mdc-elevation.scss';也不起作用。

我很确定这个问题是在我的webpack配置中的某个地方，但我无法弄清楚在哪里。

他们在做什么Material Components Web的Vue.js example为了使它工作？

这里是我的npm-debug.log万一你需要它。这里是相应的Git存储库：sk22/spg-tinf-sem03/proj01

在此先感谢！

编辑：我想能够导入scss文件，而不是编译的CSS。

来源

2016-12-28 22samuelk

尝试'@import'〜/ @ material/elevation/mdc-elevation';' – sobolevn

@sobolevn这也行不通。但是，链接的示例使用'@ material/elevation/mdc-elevation'导入它，所以也应该以某种方式工作。 – 22samuelk

看看这个简单的例子：https：//github.com/wemake-services/vue-material-button/blob/master/src/components/MaterialButton.vue#L72 – sobolevn

明白了。

，这里是我的WebPack 2配置的module.rules的一部分：

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

所以我做了什么错？我的options对象直接放在规则中，而不是加载器。

旧的WebPack配置规则是这样的：

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

看到区别？因为options仅适用于sass-loader，所以我将其扩展为一个对象，其中包含loader名称和options对象，而不是“sass-loader”字符串。

（你也可以删除path.resolve和只写“node_modules”，但它可能是更安全离开它。）

看看这个文档页面了解更多信息。 https://webpack.js.org/configuration/module/#rule-use

如果没有该加载器，则必须在每个导入前添加一个~，该webpack将转换为node_modules文件夹，至少使用以前的配置。但是，这会打破第三方SCSS框架，如Material Components Web，因为它们使用@import语句，而且它们本身没有前导~，例如here。

内.vue文件

这不会在.vue文件的工作，如vue-loader只是用青菜装载机没有任何默认选项。所以，如果你想要的工作，你可能需要使用VUE装载机自己的选择，如所描述in its documentation。

（我无法得到它由于某种原因，我不知道工作...）

来源

2016-12-29 16:34:38 22samuelk

.vue文件工作配置：https：//github.com/Bobarev/vue-mdc- adapter-webpack-simple/blob/master/template/webpack.config.js＃L48 –

我有同样的问题与@material和Vue公司。我设法解决了这个问题，而没有直接调整use属性。

解决方案

步骤1：一是使用CLI创建一个默认的Vue 2.1项目。你的文件结构将有一个./build目录。

步骤2：打开文件“utils的”你会看到一个cssLoaders()函数返回该语言vue-loader支撑的物体/地图。

你会看到在地图都sass和scss。

步骤3：更改的sass和值scss：

sass: generateLoaders('sass', { 
    indentedSyntax: true, 
    includePaths: [path.resolve(__dirname, '../node_modules')] 
    }), 
    scss: generateLoaders('sass', { 
    includePaths: [path.resolve(__dirname, '../node_modules')] 
}),

步骤4：转到您所使用的.vue文件并在<style>元素改变lang属性要么是sass要么是scss。

步骤5：当你已经做了去了终端/主机并安装sass-loader有：

NPM安装青菜装载机节点萨斯的WebPack --save-dev的

步骤6：然后运行npm run dev，它应该工作。

为什么这项工作？

库

我周围挖了一下，原来sass-loader使用node-sass具有由@ 22samuelk提到诸如includePaths一个一些选项。的includepaths告诉节点青菜或者说底层库LibSass包括从该目录/路径萨斯文件。

Vue公司

萨斯装载机选项

默认情况下Vue公司预计你的资产在你的项目中src/assets文件夹（纠正我，如果我错了）。但是，您可以使用~你想在你的项目根这看起来像`~/node_modules/@material/smth/mdc-smth.scss开始indicat。

现在，如果您希望sass-loader使用除这些选项以外的其他选项，则需要明确告诉他们。

因此path.resolve(__dirname, '../node_modules'因为utils文件在./build，您需要使用绝对路径sass-loader来了解去哪里看。

Vue公司装载机配置

这是不是真的特定于vue-loader.conf.js作品定义的问题，但VUE装载机配置如下：

它使用cssLoaders()返回的地图构建webpack预期的装载机。然后通过提供key作为加载器对象的test:中使用的文件扩展名来使用返回的映射（{key:value}）。 value被用作加载器对象。想这样其中：

{ 
    test: /\.(key)$/, 
    use: [ 
    { 
    loader: '//ld//-loader', 
    options: { 
     /*Options passed to generateLoaders('//ld//', options)*/ 
    }, 
    }, 
], 
}

哪里key是文件扩展。在这种情况下，可以是sass或scss。而//ld//是你使用的加载器。其中显示在步骤3为'sass'。

希望这会清理一些东西。花了我一段时间，因为我刚开始使用Vue。

来源

2017-06-04 11:50:46 Byebye

或者你可以查看vue-material [https://www.npmjs.com/package/vue-material] – Byebye

如何使用webpack和Vue.js正确地@import外部SCSS？

回答

相关问题