小编ELi*_*ing的帖子

您可以在下面看到生成路径的代码（带有右圆角的矩形）。我应该改变什么来准备相同或通用的函数，以便有可能按需对左角进行圆角处理？

function rightRoundedRect(x, y, width, height, radius) {
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}

链接到创建的带有可视化的 …

Webpack 允许我们创建解析别名并在我们的 CSS 代码等中进一步使用它。

resolve: {
    extensions: ['.js', '.vue', '.json', '.scss', '.css'],
    alias: {
      'fonts': path.join(__dirname, 'assets/fonts'),
      'images': path.join(__dirname, 'assets/images')
    }
  }

我的问题是，实现别名并在 LESS/SCSS 中使用它的以下步骤是什么？？：

1. 图片：背景图片：url(~imagesalias/images/image.png);
2. 字体：src: url('~fontalias/fonts/font.ttf') 格式('truetype');

我当前用于 DEV 的 CSS/SCSS 加载器：

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "resolve-url-loader"
        }]
      },
      {
        test: /\.scss$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "resolve-url-loader"
        }, {
          loader: "sass-loader"
        }]
      }
    ]
  }

默认的 Vue.js 概念是将模板、JS 和样式放在一个 *.vue 文件中。

我的问题是：如何从 *.vue 文件中划分 CSS / SCSS 并获得以下结构：

components
-- componentA
---- componentA.vue
---- componentA.scss
-- componentB
---- componentB.vue
---- componentB.scss
-- componentC
---- componentC.vue
---- componentC.scss

是否有任何好的做法来创建这样的项目结构并通过 Webpack 构建 main/dist CSS？任何示例或 Vue CLI 模板？