将ts sass转换为js中的内联CSS

Question

I want to make a library (ui kit). I use typescript + scss

To build styles I use style-loader, css-loader and sass-loader

{
  target: 'web',
   entry: { index: join(__dirname, "./src/index.ts") },
  output: {
     path: buildFolder,
    chunkFilename: "[name].js",
    filename: "[name].js",
    libraryTarget: "umd"
  },
  devtool: 'nosources-source-map',
  mode,
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "awesome-typescript-loader",
          options: {
            silent: true
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          { loader: "style-loader" }, 
          { loader: "css-modules-typescript-loader"}, 
          { loader: "css-loader", options: { modules: true } }, 
          { loader: "sass-loader" },  
        ],
      },


      {
        test: /\.(png|gif|jpg|woff|woff2|eot|ttf)$/,
        use: "url-loader?limit=100000"
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "react-svg-loader",
            options: {
              svgo: {
                plugins: [{ removeTitle: false }],
                floatPrecision: 2
              }
            }
          }
        ]
      }
    ]
  },
  externals: [externals()],
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".jsx", ".css", ".scss"],
    alias: {
      react: resolve(__dirname, "./node_modules/react"),
      "react-dom": resolve(__dirname, "./node_modules/react-dom")
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].[hash].css',
      ignoreOrder: false,
    }),
    new webpack.EnvironmentPlugin({
      mode,
      'process.env.NODE_ENV': mode
    })
  ]
}

In result bundle, I get next code

"./node_modules/css-modules-typescript-loader/index.js!./node_modules/css-loader/dist/cjs.js?!./node_modules/sass-loader/lib/loader.js!./src/Select/Select.module.scss": function(e, t, n) {
            (t = e.exports = n("../../node_modules/css-loader/dist/runtime/api.js")(!1)).push([e.i, ".yByRD45iJfwxLnVr8s3uk {\n  cursor: pointer;\n  position: absolute;\n  right: 12px;\n  top: 16px;\n  border-left: 3px solid transparent;\n  border-right: 3px solid transparent;\n  border-top: 6px solid #666666;\n  transition: transform 150ms ease-in-out; }\n  ._2T0XCUTBFjNyjjv5weojO8 {\n    transform: rotate(180deg); }\n  ._1-1qrQX0YORjWsJ0RZjUF9 {\n    cursor: default; }\n\n.CRzws_ukjJAkbDl6VPAt5 {\n  user-select: none; }\n  .CRzws_ukjJAkbDl6VPAt5 select {\n    -moz-appearance: none;\n    -webkit-appearance: none;\n    appearance: none; }\n  .CRzws_ukjJAkbDl6VPAt5 select::-ms-expand {\n    display: none; }\n\n.no4UFqz1jN8euVAg62DRd {\n  outline: none;\n  height: 37px;\n  padding-left: 12px;\n  padding-right: 30px;\n  line-height: 37px;\n  word-wrap: break-word;\n  word-break: break-all;\n  overflow: hidden;\n  cursor: pointer; }\n  ._29ckUq1SUqfMnWN9nNQrBw {\n    cursor: default; }\n  ._29ckUq1SUqfMnWN9nNQrBw, .jf8PFkA7W6TxjxskesRcz {\n    color: #C1C1C1; }\n  .no4UFqz1jN8euVAg62DRd option {\n    padding: 1rem; }\n  ._2U8tWFs3unmCUG_QVfVivm {\n    padding-left: 32px; }\n\n._3aRbiAv-VCY3M2e2zpNzz4 {\n  padding: 12px 12px;\n  min-height: 38px;\n  cursor: pointer;\n  color: #666666;\n  font-size: 14px;\n  font-weight: 300;\n  background: white; }\n  ._1gqEMY22Rtzu7wg0_BmAKn {\n    font-weight: bolder; }\n  ._3aRbiAv-VCY3M2e2zpNzz4:hover {\n    background: #F8F8F8; }\n  ._1aIdgW1FajxFD86XJ8wpjU {\n    cursor: not-allowed;\n    color: #DDDDDD; }\n\n.BK8PyDiFMlNPYkh2JVmCT {\n  border-color: #DDDDDD;\n  border-style: solid;\n  border-left-width: 1px;\n  border-right-width: 1px;\n  transition: border-bottom 1ms 150ms; }\n\n.KBYfjsjNymMFiP0PGU6ZL {\n  border-bottom-width: 1px;\n  transition: none; }\n\n._1NPRhCd-g1YLxoo1pRyCur {\n  position: absolute;\n  left: 12px;\n  top: 11px;\n  cursor: pointer; }\n  ._1NPRhCd-g1YLxoo1pRyCur svg {\n    fill: #5C8596; }\n\n.AYgjdy8SPO8ovXJZwRXfr {\n  width: 100%;\n  position: absolute;\n  z-index: 10; }\n\n._34py3HJ1_v9THl9StM3OLK {\n  position: relative; }\n\n.A4rgEQvXBWY67YIVGopQZ {\n  display: flex;\n  align-items: center; }\n\n.qytcfHpYZtGAILvZG2zA {\n  flex: 1;\n  height: 37px;\n  appearance: none;\n  outline: none;\n  border: none;\n  color: #666666;\n  font-size: 14px; }\n\n._1_GxYDi8RQLIEcHfrzgvuN {\n  fill: #666666;\n  cursor: pointer; }\n", ""]), t.locals = {
                triangle: "yByRD45iJfwxLnVr8s3uk",
                triangleOpen: "_2T0XCUTBFjNyjjv5weojO8",
                triangleDisabled: "_1-1qrQX0YORjWsJ0RZjUF9",
                container: "CRzws_ukjJAkbDl6VPAt5",
                select: "no4UFqz1jN8euVAg62DRd",
                selectDisabled: "_29ckUq1SUqfMnWN9nNQrBw",
                selectPlaceholder: "jf8PFkA7W6TxjxskesRcz",
                selectWithIcon: "_2U8tWFs3unmCUG_QVfVivm",
                option: "_3aRbiAv-VCY3M2e2zpNzz4",
                optionSelected: "_1gqEMY22Rtzu7wg0_BmAKn",
                optionDisabled: "_1aIdgW1FajxFD86XJ8wpjU",
                options: "BK8PyDiFMlNPYkh2JVmCT",
                optionsOpen: "KBYfjsjNymMFiP0PGU6ZL",
                icon: "_1NPRhCd-g1YLxoo1pRyCur",
                dropDownContainer: "AYgjdy8SPO8ovXJZwRXfr",
                relative: "_34py3HJ1_v9THl9StM3OLK",
                inputWrap: "A4rgEQvXBWY67YIVGopQZ",
                input: "qytcfHpYZtGAILvZG2zA",
                closer: "_1_GxYDi8RQLIEcHfrzgvuN"
            }
        },

webpack add sass to file but also import loaders. I want the only css without external dependency. Also I tried use mini-css-extract-plugin, and i get css files, but in js imports doesn't change on import styles from './somefile.module.css'

Answer 1

I refused from webpack. Now I'm using rollup to build my library