将Nuxt项目中的所有SASS代码转换为CSS

Question

我有一个项目，部分代码是用SASS编写的。我想摆脱 SASS 并使用普通 CSS，所以我试图找到一种编程方法将我所有的 SASS 部分转换为 CSS，或者至少有一种方法可以在我正在工作的每个组件中以编程方式执行此操作在。在该过程结束时，我将删除所有 SASS 依赖项，并在代码中只保留 CSS。

任何提示将不胜感激，提前致谢！

Answer 1

我不太了解

nuxtjs

框架，但我可以推荐一种方法将所有scss文件转换为代码库中的css；这将使用构建工具。我觉得舒服的构建工具是

gulp

。您还可以根据您的要求使用 grunt 或其他。

1. 安装 gulp 和 gulp-sass 插件。
2. 您需要在项目的根目录中创建一个

   gulpfile.js

   。其内容为：

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

// SASS to CSS task
gulp.task('sass-to-css', () => {
  return gulp.src('./src/**/*.scss')
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(gulp.dest('./dist')); // dest path for all css files
});

// Default task
gulp.task('default', gulp.series('sass-to-css'));

3. 运行 gulp 编译所有文件。
   

   npx gulp or pnpm dlx gulp if you're using pnpm

演示

还有另一种方法是转换一个或两个文件，您可以看看下面的内容：

演示