我想使用 chromatic-sass
在 Vue CLI 3 ( @vue/cli
) 生成的 Vue 应用程序中。
然而,chromatic-sass
不是用 SASS 编写的,所以我不能 @import
它来自 .scss
文件或 <style lang="scss">
堵塞。因为它是用 JavaScript(准确地说是 CoffeeScript)编写的,所以需要通过配置 SASS 渲染器来桥接它。
这是 how the docs recommend integrating it进入一个项目:
var sass = require("node-sass");
var chromatic = require("chromatic-sass");
sass.render({
file: scss_filename,
functions: chromatic
}, function(err, result) { /*...*/ });
问题是,在使用 Vue CLI 时,我无权访问或控制 node-sass
的方式。被使用。
我可以获得 chromatic-sass
的最简单方法是什么?在 Vue CLI 生成的项目中工作?这可以通过修改配置文件实现吗?
我希望得到一个完整的答案(工作代码)而不是给我指明方向。该解决方案不应以其他方式修改 Vue 处理 SCSS 文件的方式。
如果重要的话,我使用的 Vue CLI 设置:
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?: In dedicated config files
最佳答案
您应该只将需要的选项传递给 SASS 预处理器。
vue.config.js
:
const chromatic = require('chromatic-sass');
module.exports = {
css: {
loaderOptions: {
sass: {
functions: chromatic
}
}
}
};
我已经使用您的设置在新创建的项目上对其进行了测试,它按预期工作。
关于vue.js - 在 Vue 项目中使用 `chromatic-sass`(或使任何 JavaScript 函数在 Sass 文件/ block 中可用),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54155294/