Question

我想在Vue CLI 3（chromatic-sass）生成的Vue应用程序中使用@vue/cli。

但是，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

Answer 1

您应该只将所需的选项传递给SASS预处理器。

vue.config.js ：

const chromatic = require('chromatic-sass');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        functions: chromatic
      }
    }
  }
};

我已经使用您的设置在新创建的项目上对其进行了测试，并且可以正常工作。

文档：Vue CLI 3 → Passing Options to Pre-Processor Loaders

在Vue项目中使用“ chromous-sass”（或在Sass文件/块中提供任何JavaScript函数）

1 个答案: