Vue CLI 运行单独的 CSS 构建吗？

发布于 2025-01-10 20:23:27 字数 312 浏览 0 评论 0原文

我正在尝试对特定文件运行完全独立的 css/sass 构建。

所以我的 src 中有一个文件夹，例如：

/src
   /sass
      ./index.sass
      ./btn.sass
      ./etc.sass

我试图将其输出到特定文件，例如“build.css”或任何最终会在“dist”的默认构建目录中作为“dist/build”的文件.css”。

一直在尝试使用 vue.config.js 和 chainWebpack，但在这里完全迷失了。

有什么建议如何实现这一点吗？

原文

I'm trying to run a completely separate css/sass build to a specific file.

So I have a folder in my src like:

/src
   /sass
      ./index.sass
      ./btn.sass
      ./etc.sass

I'm trying to get it to output to a specific file like "build.css" or whatever which would just end up in the default build directory of "dist" as "dist/build.css".

Been trying to play with vue.config.js and chainWebpack but totally lost here.

Any suggestions how to accomplish this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哆兒滾 2025-01-17 20:23:27

一种方法是添加一个指向要捆绑的 Sass 文件的 Webpack entry （使用 configureWebpack.entry)：

// vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

  ⋮

  configureWebpack: {

    entry: {

      app: './src/main.js',

      extCss: './src/sass/index.sass',

One way to do this is to add a Webpack entry that points to the Sass file you want to bundle (using configureWebpack.entry):

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  ⋮
  configureWebpack: {
    entry: {
      app: './src/main.js',
      extCss: './src/sass/index.sass', ????
    },
  },
})

This has a downside as it also generates a .js file that is effectively a no-op. You'd have to delete that manually as a cleanup step:

dist/css/app.css
dist/css/extCss.css           # CSS bundle of Sass output
dist/js/app.js
dist/js/chunk-vendors.js
dist/js/extCss.js             # no-op file (delete me)

Also delete the <script src="/js/extCss.js"></script> from dist/index.html.

回复收藏 0 原文

~没有更多了~