@ecoding/base.build 0.2.1 → 0.2.2

package/README.md

@@ -38,6 +38,20 @@
 }
 ```
 
+## 注意：
+
+内部已经支持了 sass 和 less 配置，默认 less，如果想要使用 sass，还需额外安装：
+
+```bash
+# "node-sass": "^7.0.3",
+# "sass-loader": "^13.1.0",
+
+npm i sass-loader node-sass -D --registry http://r.cnpmjs.org
+# 或
+npm i sass-loader node-sass -D --registry https://registry.npm.taobao.org
+
+```
+
 ## 复杂自定义打包配置
 
 在工程下新建 build.js，return webpack 的配置即可，注意完全按照 webpack 配置规则，框架无做任何干涉
@@ -90,6 +104,7 @@ module.exports = {
     "less-loader": "11.0.0",
     "mini-css-extract-plugin": "2.6.1", // css压缩
     "postcss-loader": "7.0.0", // css向下兼容
+    "rimraf": "^3.0.2",
     "style-loader": "3.3.1", // 编译 style 内联css
     "terser-webpack-plugin": "5.3.3", // js压缩
     "typescript": "4.8.3",

package/libs/module/css-loader/index.js

@@ -7,10 +7,11 @@ const loaders = [
     {
         loader: "css-loader",
         options: {
-            modules: { // enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) and /\.icss\.\w+$/i.test(filename) regexp.
+            modules: {
+                // enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) and /\.icss\.\w+$/i.test(filename) regexp.
                 auto: true,
                 mode: "local",
-                localIdentName: '[name]-[local]--[hash:base64:5]',
+                localIdentName: "[name]-[local]--[hash:base64:5]"
             }
         }
     },
@@ -46,6 +47,18 @@ const getLessRule = () => {
     };
 };
 
+const getSassRule = () => {
+    return {
+        test: /\.scss$/,
+        use: [
+            ...loaders,
+            {
+                loader: "sass-loader"
+            }
+        ]
+    };
+};
+
 const getCssRule = () => {
     return {
         test: /\.css$/,
@@ -55,5 +68,6 @@ const getCssRule = () => {
 
 module.exports = {
     getCssRule,
+    getSassRule,
     getLessRule
 };

package/libs/module/css-loader/ssr.js

@@ -2,10 +2,11 @@ const loaders = [
     {
         loader: "css-loader",
         options: {
-            modules: { // enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) and /\.icss\.\w+$/i.test(filename) regexp.
+            modules: {
+                // enable CSS modules for all files matching /\.module\.\w+$/i.test(filename) and /\.icss\.\w+$/i.test(filename) regexp.
                 auto: true,
                 mode: "local",
-                localIdentName: '[name]-[local]--[hash:base64:5]',
+                localIdentName: "[name]-[local]--[hash:base64:5]",
                 exportOnlyLocals: true
             }
         }
@@ -41,6 +42,18 @@ const getLessRule = () => {
     };
 };
 
+const getSassRule = () => {
+    return {
+        test: /\.scss$/,
+        use: [
+            ...loaders,
+            {
+                loader: "sass-loader"
+            }
+        ]
+    };
+};
+
 const getCssRule = () => {
     return {
         test: /\.css$/,
@@ -50,5 +63,6 @@ const getCssRule = () => {
 
 module.exports = {
     getCssRule,
+    getSassRule,
     getLessRule
 };

package/libs/module/index.js

@@ -1,29 +1,22 @@
-const getTsRule = require('./ts-loader');
-const { getCssRule, getLessRule } = require('./css-loader');
-const getImgRule = require('./img-loader');
-const getSvgRule = require('./svg-loader');
-const getFontRule = require('./font-loader');
+const getTsRule = require("./ts-loader");
+const { getCssRule, getLessRule, getSassRule } = require("./css-loader");
+const getImgRule = require("./img-loader");
+const getSvgRule = require("./svg-loader");
+const getFontRule = require("./font-loader");
 
 const getModule = () => {
     const tsRule = getTsRule();
     const lessRule = getLessRule();
     const cssRule = getCssRule();
+    const sassRule = getSassRule();
     const imgRule = getImgRule();
     const svgRule = getSvgRule();
     const fontRule = getFontRule();
 
     return {
         // noParse:/test.js$/, 不编译正则匹配上的文件
-        rules: [
-            tsRule,
-            lessRule,
-            cssRule,
-            imgRule,
-            svgRule,
-            fontRule
-        ]
-    }
-}
+        rules: [tsRule, lessRule, sassRule, cssRule, imgRule, svgRule, fontRule]
+    };
+};
 
-
-module.exports = getModule;
+module.exports = getModule;

package/libs/module/ssr.js

@@ -1,8 +1,8 @@
 const getImgRule = require("./img-loader");
-const getTsRule = require('./ts-loader/ssr');
+const getTsRule = require("./ts-loader/ssr");
 const getSvgRule = require("./svg-loader");
 const getFontRule = require("./font-loader");
-const { getLessRule, getCssRule } = require("./css-loader/ssr");
+const { getLessRule, getCssRule, getSassRule } = require("./css-loader/ssr");
 
 const getModule = () => {
     const tsRule = getTsRule();
@@ -11,17 +11,11 @@ const getModule = () => {
     const fontRule = getFontRule();
     const cssRule = getCssRule();
     const lessRule = getLessRule();
+    const sassRule = getSassRule();
 
     return {
         // noParse:/test.js$/, 不编译正则匹配上的文件
-        rules: [
-            tsRule,
-            lessRule,
-            cssRule,
-            imgRule,
-            svgRule,
-            fontRule
-        ]
+        rules: [tsRule, lessRule, sassRule, cssRule, imgRule, svgRule, fontRule]
     };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ecoding/base.build",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "description": "tpl building",
     "author": "cxc",
     "license": "MIT",
@@ -29,6 +29,7 @@
         "cross-env": "7.0.3",
         "css-loader": "6.7.1",
         "css-minimizer-webpack-plugin": "4.0.0",
+        "eslint": "8.18.0",
         "globby": "^11.0.2",
         "html-webpack-plugin": "5.5.0",
         "inline-chunk-html-plugin": "1.1.1",
@@ -50,5 +51,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "98edfa407d94f9358bc7d1275634bcb0d79a0c01"
+    "gitHead": "3e1dc18ba738b70dc75d79e88f366cc8d6a3f666"
 }